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"被设置 - 指示（读取：建议）浏览器在页面加载时加载整个流 - 这个过程继续，即使你已经消灭了{{1清空容器<audio>

的元素

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

src

接下来我做的是重新格式化你附加到... $('audio').each(function(){ $(this).pause().attr('src', ''); }); $('#container').empty(); ...（主要）的标记，主要是为了我自己的理智，但更重要的是我从你的$("#glavni")中删除了<source>标记元件。通过<audio>元素返回src属性，我们可以确定正在播放哪个源，并且知道我们的<audio>方法正在直接调用有问题的元素。

JS

pause()

另一件事 - 我评论了你的$.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（）方法用于在更改源或其他设置后更新音频/视频元素 - Source

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

其他选项

在您对问题的评论中，我提到了使用一个 load()元素的可能性，该元素基本上是一个可回收的对象，即时重做。如果你仍然有问题，这种方法可能值得探讨，因为它更容易调试一个实例的行为 - 更不用说它的标记较少，[如果你问我]几乎总是一件好事。

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();
});

HTML5音频重新加载文件

2 个答案:

JS

其他选项