HTML5音频控制停止按钮（与暂停不同）

Question

我已经到处找了（我想），但似乎找不到在html5音频控制器中调用停止事件的方法。我的音频控制器有一个播放列表，每个曲目被选中时会播放或循环播放下一曲。还有一个下一曲按钮可以使用。

我的播放/暂停按钮长这样：

function playPause() {
    var audioPlayer = document.getElementsByTagName('audio')[0];
    if(audioPlayer!=undefined) {
        if (audioPlayer.paused) {
            audioPlayer.play();
        } else {
            audioPlayer.pause();
        }
    } else {
        loadPlayer();
    }
}

我需要一个“停止”按钮，可以停止音频并回到当前播放的曲目开头。我考虑过如何使用当前播放位置，但是无法理解。

我也尝试了这个（在另一个问题中得到的建议），但没有成功：

function stop() {
    var audioPlayer = document.getElementsByTagName('audio');
    addEventListener('loadedmetadata', function() {
        this.currentTime = 0;
    }, false);
}

有什么想法吗？

- yolise

Answer 1

如果您的播放/暂停功能正常，则应该可以使用以下方法停止播放：

function stop() {
    var audioPlayer = document.getElementsByTagName('audio')[0];
    audioPlayer.pause();
    audioPlayer.currentTime = 0;
}

- robertc

---

没错，它完美地实现了！我不得不在标签名后面添加[0]才能让它与我的播放列表一起工作。谢谢！（很抱歉，由于我的可怜声望只有1，我无法为您投票。） - yolise

@yolise 是的，抱歉，getElementsByTagName 返回一个列表。我会给你的问题点赞，这样会有帮助的 ;) - robertc

Answer 2

这是一个小型演示代码，您可以在其中播放、暂停和停止音频。

在线演示

HTML

<input type="button" value="play" id="playBtn" />
<input type="button" value="pause" id="pauseBtn" />
<input type="button" value="stop" id="stopBtn" />

Jquery

var source = "http://www.giorgiosardo.com/HTML5/audio/audio/sample.mp3"
var audio = document.createElement("audio");
audio.src = source;

$("#playBtn").click(function () {
    audio.play();
});

$("#pauseBtn").click(function () {
    audio.pause();
});

$("#stopBtn").click(function () {
    audio.pause();
    audio.currentTime = 0;
});

Source

- Yasser Shaikh

Answer 3

如果您想停止音乐并中止下载操作，可以使用以下代码：

<button id="btnStop" onclick="player.src = ''; player.src = 'song.mp3';">Stop</button>

我们在这里使用Java来更改歌曲的源并将其放回那里！有点棘手但可行。

- Tony AS