Désactiver autoplay dans un playlist

**l_achraf** · 04/05/2020, 09h10

Bonjour tout le monde,

J'ai un playlist qui fonctionne bien en Chrome mais j'ai un problème au niveau de l'autoplay que j'en veux pas dans Internet Explorer et Edge. Comment pourrais-je désactiver autoplay svp?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="working_files/styles.css" title="Default" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="working_files/custom.js"></script>
</head>
<body>
<div id="player">
  <a href="#" class="audio prev"><span>Prev</span></a>
 <audio controls></audio>
  <a href="#" class="audio next"><span>Next</span></a>
  <br><span class="audio name"></span>
</div>
<div id="list">
  <p><a href="#" class="audio play" data-frogsong-id="AmericanToad_Call"><span active>1. American Toad Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="Bullfrog_Call"><span class="sound">2. Bullfrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="CopesGrayTreefrog_Call"><span class="sound">3. Treefrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="CricketFrog_Call"><span class="sound">4. Cricket Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="EasternGrayTreefrog_Call"><span class="sound">5. EasternGray Treefrog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="FowlersToad_Call"><span class="sound">6. Fowlers Toad Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="GreenFrog_Call"><span class="sound">7. Green Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="NorthernLeopardFrog_Call"><span class="sound">8. Northern Leopard Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="PickeralFrog_Call"><span class="sound">9. Pickeral Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="PlainsLeopardFrog_Call"><span class="sound">10. Plains Leopard Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="SpringPeeper_Call"><span class="sound">11. Spring Peeper Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="WesternChorusFrog_Call"><span class="sound">12. Western Chorus Frog Call</span></a></p>
  <p><a href="#" class="audio play" data-frogsong-id="WoodFrog_Call"><span class="sound">13. Wood Frog Call</span></a></p>
</div>
<script>
  $('span').on('click', function() {
  $('span').removeClass('active');
  $(this).addClass('active');
});
</script>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
window.Formaweb = window.Formaweb || {};
window.Formaweb.Player = function() {
  'use strict';
  var audio;
  var playlist;
  var len;
  var current;
  init();
  function init(){
    current = 0;
    audio = $('audio')[0];
 
    playlist = [
      {name: '1. American Toad Call', path: 'frog_sounds/AmericanToad_Call.mp3', id: 'AmericanToad_Call'},
      {name: '2. Bullfrog Call', path: 'frog_sounds/Bullfrog_Call.mp3', id: 'Bullfrog_Call'},
      {name: '3. Treefrog Call', path: 'frog_sounds/CopesGrayTreefrog_Call.mp3', id: 'CopesGrayTreefrog_Call'},
      {name: '4. Cricket Frog Call', path: 'frog_sounds/CricketFrog_Call.mp3', id: 'CricketFrog_Call'},
      {name: '5. EasternGray Treefrog Call', path: 'frog_sounds/EasternGrayTreefrog_Call.mp3', id: 'EasternGrayTreefrog_Call'},
      {name: '6. Fowlers Toad Call', path: 'frog_sounds/FowlersToad_Call.mp3', id: 'FowlersToad_Call'},
      {name: '7. Green Frog Call', path: 'frog_sounds/GreenFrog_Call.mp3', id: 'GreenFrog_Call'},
      {name: '8. Northern Leopard Frog Call', path: 'frog_sounds/NorthernLeopardFrog_Call.mp3', id: 'NorthernLeopardFrog_Call'},
      {name: '9. Pickeral Frog Call', path: 'frog_sounds/PickeralFrog_Call.mp3', id: 'PickeralFrog_Call'},
      {name: '10. Plains Leopard Frog Call', path: 'frog_sounds/PlainsLeopardFrog_Call.mp3', id: 'PlainsLeopardFrog_Call'},
      {name: '11. Spring Peeper Call', path: 'frog_sounds/SpringPeeper_Call.mp3', id: 'SpringPeeper_Call'},
      {name: '12. Western Chorus Frog Call', path: 'frog_sounds/WesternChorusFrog_Call.mp3', id: 'WesternChorusFrog_Call'},
      {name: '13. Wood Frog Call', path: 'frog_sounds/WoodFrog_Call.mp3', id: 'WoodFrog_Call'},
    ];
 
    len = playlist.length - 1;
    run(playlist[0], audio);
 
    audio.addEventListener('ended', function(e){
    run(playlist[0], audio);
    next();
    });
    $('.audio.next').on('click', function(){
      next();
      run(playlist[current], audio);
 
      return false;
    });
    $('.audio.prev').on('click', function(){
      prev();
      run(playlist[current], audio);
      return false;
    });
 
    $('.audio.play').on('click', function(){
      var frogsong_id = $(this).attr('data-frogsong-id');
      if(frogsong_id != undefined){
      playById(frogsong_id);
      }
    return false;
    });
  }
  function run(frogsong, player) {
  $('.audio.name').text(frogsong.name);
  $('span').removeClass('active');
  $('a[data-frogsong-id=' + playlist[current].id + ']').children().addClass ('active')
  player.src = frogsong.path;
 
  audio.load();
  audio.play();
  }
function next(){
current++;
if(current > len) current = 0;
  }
 
  function prev(){
    current--;
    if(current < 0) current = 0;
  }
 
function playById(id){
    var playlist_id = undefined;
 
    $.each(playlist, function(index, value){
      if(value.id == id){
        playlist_id = index;
      }
    });
 
    if(playlist_id != undefined){
      current = playlist_id;
      run(playlist[current], audio);
    }
  }
}
$(document).ready(function(){
var player = window.Formaweb.Player(); 
});

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#player {
  text-align: center;
  background:#e6e6e6;
  border: 1px solid;
  width: 400px;
  padding:10px;
}
#player a {
  width: 100px;
  font-size: 14px;
  padding: 5px;
 background: #e6e6e6;
  cursor: pointer;
  color: #000
}
#player span {
  margin-top: -10px;
}
audio {
  width: 300px;
  height: 55px;
}
 
#list {
  width: 422px;
}
 
#list span {
color: #000000;
font-family: Verdana, Arial, Helvetica;
background: #c1c1c1;
display: block;
border: 1px solid;
padding:5px;
}
 
#list span.active {
  background: #736e69;
}
 
#list a:hover span {
  color: #fff;
  text-decoration:none;
}
 
div p {
  margin:0;
    }
 
div a {
  text-decoration:none;
  }

Merci beaucoup pour votre collaboration.

Invité · 04/05/2020, 10h02

Bonjour,

je ne vois pas d'autoplay dans ton code...
... ni de raison que ça s'active sous IE ou Edge.

<audio> : l'élément audio embarqué

autoplay

Attribut booléen.
Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.

Compatibilité des navigateurs

Désactiver autoplay dans un playlist

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager