【问题标题】:HTML audio Element how to replay?HTML音频元素如何重放?
【发布时间】:2011-08-10 03:11:32
【问题描述】:

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

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

【问题讨论】:

    标签: javascript html html5-audio


    【解决方案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() 完成了这项工作

    【讨论】:

    【解决方案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';

            【讨论】:

              猜你喜欢
              • 2014-03-02
              • 2014-01-10
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2021-01-23
              • 2015-03-15
              • 2019-04-30
              • 1970-01-01
              相关资源
              最近更新 更多