HTML5 音频按钮 - 第一次按下时工作，然后停止工作答案

【问题标题】：HTML5 Audio Button - Works first time pressed, then stops workingHTML5 音频按钮 - 第一次按下时工作，然后停止工作
【发布时间】：2013-02-13 21:52:43
【问题描述】：

我有一个按钮，当按下它时，它会发出短促的声音。它在第一次按下并播放声音时工作。下一次和所有其他时间它都不起作用（直到我重新加载页面，然后它再次起作用）。我的代码如下：

我尝试添加 audio.stop();在 audio.play() 之前；希望它能修复它，但它使它根本不起作用。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5</title>
</head>
<body>

<audio>
<source src="buzzer.mp3" type="audio/mpeg">
</audio>

<input type="submit" id="buttonPlaySound" value="Play Sound">

<script>
var audio = document.getElementsByTagName("audio")[0];

buttonPlaySound.onclick = function () { 
    audio.play();
};
</script>
</body>
</html>

【问题讨论】：

您使用的是哪个浏览器？
Mac OS X 10.8.2 上的 Safari 6.0.2
您先尝试过这个吗？ stackoverflow.com/questions/9335577/…
@GertCuykens 检查了，类似的问题...添加 audio.load();在 audio.play() 之前；修好了。

标签： javascript html html5-audio

【解决方案1】：

另一种解决方案，并且由于某些代理从远程重新加载文件而不太容易出现效率问题，方法是在调用 audio.play() 之前调用 audio.currentTime = 0 在您的示例中，这变为：

buttonPlaySound.onclick = function () { 
    audio.currentTime = 0;
    audio.play();
};

编辑：
在 chrome 上 currentTime 最初似乎是只读的。所以这行不通。有一个解决方法：
如果您在音频对象上手动设置src（甚至与audio.src = audio.src 中的值相同）currentTime 变为可设置并且上述解决方案将按预期工作

【讨论】：

【解决方案2】：

这是因为 HTML5 音频播放了一次，并且它的状态是正在播放，所以它不会再次播放。

你可以试试这个：

var audio = document.getElementsByTagName("audio")[0];
var played = false;

buttonPlaySound.onclick = function () { 
    if (played) {
        audio.pause();
    }
    audio.play();
    played = true;
};

【讨论】：

【解决方案3】：

你应该这样尝试..

<input type="submit" id="buttonPlaySound" value="Play Sound" onclick ="Play()">
<input type="submit" id="buttonPlaySound" value="Play Sound" onclick ="Pause()">

<script>
var audio = document.getElementsByTagName("audio")[0];
var played = false;

    function play() 
    {
        audio.play();
    }
    function pause()
    {
       if(played)
       {
           audio.pause();
       }
       audio.play();
       played = true;
    };
</script>

【讨论】：

【解决方案4】：

添加 audio.load();在 audio.play() 之前；帮我修好了。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML5</title>
</head>
<body>

<audio>
<source src="buzzer.mp3" type="audio/mpeg">
</audio>

<input type="submit" id="buttonPlaySound" value="Play Sound">

<script>
var audio = document.getElementsByTagName("audio")[0];

buttonPlaySound.onclick = function () { 
    audio.load();
    audio.play();
};
</script>
</body>
</html>

【讨论】：