Désactiver autoplay dans un playlist

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:

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:

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:

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.