使用按钮 onclick 强制触发事件侦听器

Question

使用下面的代码制作基本的音频背景音乐播放器来播放文件夹中的文件。打开后播放（按钮或按比例），它会播放音乐文件夹中的随机文件。当该文件结束时，它会加载另一个随机文件并播放它，然后继续重复该过程。问题 - 是否可以添加一个按钮 onclick =（即下一首歌曲）来触发 "ended" 事件并在单击时触发下一首歌曲。我想我还需要添加一个 music.stop() 。我只是想强制播放歌曲结束并让循环加载下一首歌曲。 "ended" 事件似乎是只读事件，无法手动更改为 true。

    <html>  
<head>
<body> 
<!-- <audio id="player" controls><source src="music/0.mp3" type="audio/mp3"></audio> -->
<div align="center" id="soundtrack">  
<script>
var WhichSong="Music2/song"+(Math.floor(Math.random()*23))+".mp3"

document.getElementById('soundtrack').innerHTML="<audio controls id='player'><source src=\"" + WhichSong + "\"></source>Your browser does not support the audio element.</audio>";

    var x = 0;
    var music = document.getElementById("player");
    music.addEventListener("ended", function() {
    x=x+1;
    music.src = "Music2/song"+(Math.floor(Math.random()*23))+".mp3";
    music.load();
    music.play();       
    });
    </script>
    <br/>
  <button onclick="document.getElementById('player').play()">Play Music</button> 
  <button onclick="document.getElementById('player').pause()">Pause Music</button>
  <button onclick="document.getElementById('player').muted=true">Mute</button>
  <button onclick="document.getElementById('player').muted=false">Un-mute</button>
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button>

</div>  
</body>

Answer 1

最简单的方法是将事件侦听器分配给一个变量，然后从您的 onclick 调用该函数。

var endedListener = function() {
    x=x+1;
    music.src = "Music2/song"+(Math.floor(Math.random()*23))+".mp3";
    music.load();
    music.play();       
    };
music.addEventListener("ended", endedListener);


<button onclick="endedListener()">Next</button>

请记住，调用 endedListener 并不会真正停止播放音频。它只是触发你自己的功能逻辑。

使用按钮 onclick 强制触发事件侦听器

Force Trigger event listner with button onclick

html

javascript

html5-audio