HTML5音频控制停止按钮(而不是暂停)

时间:2012-05-18 13:45:58

标签: html5 controller html5-audio

我绝对无处不在(我想)并且似乎找不到在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);
        }
`

有什么想法吗?

3 个答案:

答案 0 :(得分:10)

如果你的播放/暂停有效,这应该适用于停止:

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

答案 1 :(得分:2)

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

Live Demo

<强> 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

答案 2 :(得分:0)

如果您想停止播放音乐并中止下载操作,可以使用以下代码:

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

我们在这里使用java来改变歌曲src,然后把它放回去!棘手但有点