Question

我有一个网页，其中包含属于播客的剧集列表。剧集列表在每集的标题旁边都有一个“播放”字形，并将剧集的MP3源设置为“数据 - 值”属性：

<a href="#/">
  <span id="play-episode-1" data-value="https://www.example.com/serial-s01-e01.mp3" data-episodetitle="Episode 01: The Alibi" class="glyphicon glyphicon-play"></span>
</a>

我还有一个HTML5音频元素，页面上也有一个空的源属性。

<span class="navbar-text audio-control">
  <audio id="player" preload="auto" controls>
    <source id="mpeg-source" src="" type="audio/mpeg">
  </audio>
</span>

我使用jQuery通过设置src属性并播放剧集来响应播放图标点击事件。

 var audio = $("#player");

 $(document).on("click", "[id^=play-episode]", function(e) {
    e.preventDefault();
    $("#mpeg-source").attr("src", $(this).attr("data-value"));
    var title = $(this).attr("data-episodeTitle");
    $(this).attr("class", "glyphicon glyphicon-volume-up");

    audio[0].pause();
    audio[0].load();

    audio[0].addEventListener('loadeddata', function() {
        audio[0].play();
    });

我遇到的问题是，当我设置源属性并开始播放剧集时，它只会缓冲到某一点，一旦到达该点，播放就会停止，所以在我看来它只是停止加载。我已经根据this documentation将preload属性设置为auto，这似乎表明它应该有助于解决这个问题。我怀疑的是，由于未在页面加载时设置源，因此preload属性没有区别。

有没有办法提示音频元素加载整个音频文件，或者我只是在这种情况下咆哮错误的树？

HTML 5音频元素不缓冲

0 个答案: