jquery - HTML5 音频重新加载文件

Question

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

我用 $('#content').html(''); 清除内容 div然后循环(使用 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

我相信有一些问题可以解决。对于初学者来说，我相信至少您的一些问题与垃圾收集有关。 The Mozilla Docs建议首先调用 pause() 的方法<audio>上的方法有问题的元素，然后设置 src到一个空字符串。我认为正在发生的事情是因为 preload="auto"设置 - 它指示(阅读:建议)浏览器在页面加载时加载整个流 - 即使您已经清除了 <audio>，此过程仍会继续。清空容器中的元素$('#container').html('')

我修改了你的一些代码来完成一些事情。第一个是到第一个 pause() 的循环所有<audio>元素，然后设置它们的 src为空字符串:

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

我做的下一件事是重新格式化您附加到 $("#glavni") 的标记。 (主要)，主要是为了我自己的理智，但更重要的是我删除了 <source>来自您的标签<audio>元素。随着src属性(property)回到<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()方法。

The load() method is used to update the audio/video element after changing the source or other settings - Source

这更像是一种预防措施 - 理论上，它不会伤害您，但由于所描述的问题与加载/卸载问题有关，我认为最好将其删除。

其他选项

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