HTML5音频重新加载文件

Question

我正在使用AJAX从数据库中加载一些行，在所有数据中，最重要的是音频文件的路径，例如uploads/song.mp3 。

我用$('#content').html('');清除了内容div $('#content').html(''); 然后遍历数据（使用jQuery.each）-创建带有文本和<audio>元素的容器，这些容器的歌曲路径已加载到src属性中。

问题在于，并非所有歌曲都能播放-初次加载时有些歌曲会播放，有些则不会。 然后在下一个AJAX请求中，当我获取新数据并从#content删除所有内容时-没有一个<audio>元素会播放歌曲。

这是一些代码：

$.ajax({
                type: 'POST',
                url: 'xxx.php',
                data: {fr : fraza, ajax : true},
                dataType: 'json'
           }).success(function(retData) {
                //console.log(retData);
                $('#container').html('');
                $.each(retData, function(index, value) {
                    var unos = value;
                    $('#glavni').append('<div class="pesma-item" id="pesma-id-'+ unos.id +'"><h2>' + unos.naziv + '</h2><img src="' + unos.note + '" alt="" /><div><p><pre>' + unos.temp + '</pre></p><br style="clear: both" /><audio controls preload="auto"><source src="' + unos.audio + '" type="audio/mpeg"></audio></div><br style="clear:both" /></div>');
                    $('#pesma-id-' + unos.id + ' audio')[0].load();
                });


           });

如何强制每个audio元素重新加载文件，以便可以播放？

Answer 1

我相信可以解决一些问题。 首先，我相信至少您的某些问题与垃圾收集有关。 Mozilla Docs建议一种方法，该方法首先在有问题的<audio>元素上调用pause()方法， 然后将src设置为空字符串。 我认为这是因为设置了preload="auto" （指示（阅读：建议）浏览器在页面加载时加载整个流），即使您已经清除了<audio> ，该过程仍在继续通过清空容器$('#container').html('')元素

我对您的代码做了一些修改，以做一些事情。 第一个是首先pause()所有<audio>元素的循环，然后将其src设置为空字符串：

...
$('audio').each(function(){
    $(this).pause().attr('src', '');
});
$('#container').empty();
...

我要做的第二件事是重新格式化添加到$("#glavni") （main）上的标记，主要是出于我的理智，但更重要的是，我从<audio>元素中删除了<source>标签。 将src属性放回到<audio>元素上，我们可以确定正在播放哪个源，并且知道直接在有问题的元素上调用了pause()方法。

JS

$.ajax({
    type: 'POST',
    url: 'xxx.php',
    data: {
        fr: fraza,
        ajax: true
    },
    dataType: 'json'
}).success(function (retData) {
    //console.log(retData);
    $('audio').each(function(){
        $(this).pause().attr('src', '');
    });
    $('#container').html('');
    $.each(retData, function (index, value) {
        var unos = value, markup;   
        markup += '<div class="pesma-item" id="pesma-id-' + unos.id + '">';
        markup +=     '<h2>' + unos.naziv + '</h2>';
        markup +=     '<img src="' + unos.note + '" alt="" />';
        markup +=     '<div>';
        markup +=         '<p>';
        markup +=             '<pre>' + unos.temp + '</pre>';
        markup +=         '</p>';
        markup +=         '<br style="clear: both" />';
        markup +=         '<audio controls preload="auto" src="' + unos.audio + '">';
        markup +=         '</audio>';
        markup +=     '</div>';
        markup +=     '<br style="clear:both" />';
        markup += '</div>';
        $('#glavni').append(markup);
       // $('#pesma-id-' + unos.id + ' audio')[0].load();
    });
});

另一件事-我注释掉了您的load()方法。

更改源或其他设置后，使用load（）方法更新音频/视频元素- 源

从根本上讲，这只是预防措施，从理论上讲，这不会对您造成伤害，但是由于所描述的问题与加载/卸载麻烦有关，所以我认为最好将其删除。

其他选择

在对您的问题的评论中，我提到了使用一个 <audio>元素的可能性，该元素基本上是可循环使用的对象，可以即时进行重新设计。 如果您仍然遇到问题，则此方法可能值得探索，因为它更容易调试一个实例的行为-更不用说它的标记更少了，[如果您问我]，这几乎总是一件好事。

Answer 2

也许试试这个

HTML:

<div id="audio_player_container">

</div>

JS :

$.ajax({
   type: 'POST',
   url: 'xxx.php',
   data: {fr : fraza, ajax : true},
   dataType: 'json'
}).success(function(retData) {
//$('#container').html('');
// Maybe instead of removing html from #container you should do this
$('#glavni').empty();
$.each(retData, function(index, value) {
    // store audio source in anchor href
    var unos = value, markup;   
    markup += '<div class="pesma-item" id="pesma-id-' + unos.id + '">';
    markup +=     '<h2>' + unos.naziv + '</h2>';
    markup +=     '<img src="' + unos.note + '" alt="" />';
    markup +=     '<div>';
    markup +=         '<p>';
    markup +=             '<pre>' + unos.temp + '</pre>';
    markup +=         '</p>';
    markup +=         '<br style="clear: both" />';
    markup +=         '<a class="trigger" href="' + unos.audio + '">Play This';
    markup +=         '</a>';
    markup +=     '</div>';
    markup +=     '<br style="clear:both" />';
    markup += '</div>';
    $('#glavni').append(markup);
    });
});

$(".trigger").on("click", function(e) {
   e.preventDefault();
   var sourceUrl = $(this).attr("href"), audio_markup;
   audio_markup += '<audio id="audio_player" controls preload="auto">';
   audio_markup += '<source id="audio_src" src="' + sourceUrl + '" type="audio/mpeg">';
   audio_markup += '</audio>';
   $("#audio_player_container").html(audio_markup);
   var player = $("#audio_player"); 
   // maybe then do something
   player[0].load();
   player[0].play();
});