2

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

我通过数据清除内容 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元素重新加载文件，以便可以播放？

4

2 回答 2

8

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

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

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

我做的下一件事是重新格式化你附加到$("#glavni")（main）的标记，主要是为了我自己的理智，但更重要的是我从你的元素中删除了<source>标签。<audio>使用元素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() 方法用于在更改源或其他设置后更新音频/视频元素 - Source

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

其他选项

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

于 2013-03-18T18:28:36.087 回答
1

也许试试这个..

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();
});
于 2013-03-21T22:09:39.757 回答