HTML音频元素如何重放？

Posted 2023-02-25

【中文标题】HTML音频元素如何重放？

【英文标题】：HTML audio Element how to replay?

【发布时间】：2011-08-10 03:11:32

【问题描述】：

我设置了一个 html5 页面，其中包含一个节点。 该页面将播放音乐（mp3格式），但它只是播放声音结束，我使用javascript来控制音频元素，即使这样，我也无法重播它，只能停止。

HTML5 音频元素是否支持重播？怎么做？

【参考方案1】：

请阅读本文

http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/

对于重播事件

你可以设置选项，在重播点击

audioElement.currentTime=0;
audioElement.play();

【讨论】：

它不适用于所有浏览器。 .load() 然后.play() 总是有效，但它可能会使用更多数据...

【参考方案2】：

上述建议对我不起作用或在不适用的情况下。当我的代码需要时，我需要重放声音。

以下代码有效（至少 chrome）：

audioElement.setAttribute('src', audiosrc); audioElement.play();

换句话说，再次设置 src 属性，然后 play() 完成了这项工作

【讨论】：

这是有效的，但每次都会对声音资源提出新的请求。

@valkirilov 但它可以在code.google.com/p/chromium/issues/detail?id=121765附近工作

【参考方案3】：

html5音频元素有一个loop属性，设置为loop=loop

http://www.w3schools.com/html5/html5_audio.asp

【讨论】：

但我只想播放音频，然后等待用户点击时再次播放

【参考方案4】：

如果托管视频的服务器不支持在客户端搜索（HTTP RangeRequest），则该命令

audioElement.currentTime=0;

来自@JapanPro 的答案在 Chromium 中被默默忽略。此行为填写为crbug #121765。

有一个handy guide on MDN how to configure your server 玩得很好。但如果你不能，我已经成功了

audioElement.load();

不出所料，它会重新加载音频源并作为副作用寻找开头。不太好，但它非常直观且有效。

来源：http://www.whatwg.org/specs/web-apps/current-work/#loading-the-media-resource

【参考方案5】：

你可以试试这个：

<audio id="audiotag1" src="audio/flute_c_long_01.wav" preload="auto"></audio>
<a href="javascript:play_single_sound();">Play 5-sec sound on single channel</a>
<script type="text/javascript">
    function play_single_sound() 
        document.getElementById('audiotag1').play();
    
</script>

参考：http://www.storiesinflight.com/html5/audio.html

【参考方案6】：

不要使用node.load()，这对于慢速设备来说太慢了。

要停止，您应该使用：

node.currentTime = 0

要重播，你可以这样做：

node.currentTime = 0
node.play()

【参考方案7】：

用途：

  audio.pause() // important!!!
  audio.currentTime = 0
  audio.play()

【参考方案8】：

在 HTML5 中，您只需设置 audioElement.loop='true';