Question

使用下面的代码可以使基本的音频背景音乐播放器播放文件夹中的文件。在打开和播放（按按钮或按比例缩放）后，它将在“音乐”文件夹中播放随机文件。该文件结束时，它将加载另一个随机文件并播放它，然后继续重复该过程。问题-是否可以在onclick =（即下一首歌）上添加按钮以触发“结束”事件并在单击时触发下一首歌。我想我还需要添加一个music.stop（）。我只是试图迫使正在播放的歌曲结束，并让循环加载下一首歌曲。看来“结束”事件是只读事件，不能手动更改为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的强制触发事件列表器

1 个答案: