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()メソッドを呼び出し、次にを空の文字列に設定するメソッドを提案しています。私が考えているのは、 is が設定されているため、ページの読み込み時にストリーム全体を読み込むようにブラウザーに指示 (読み取り: 示唆) しているため、コンテナーを空にして要素を一掃したとしても、このプロセスは継続するということです。<audio>srcpreload="auto"<audio>$('#container').html('')

いくつかのことを行うために、コードを少し修正しました。最初は最初にpause()すべての<audio>要素へのループであり、次にそれらsrcを空の文字列に設定します。

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

次に行ったのは、追加するマークアップ$("#glavni")(メイン) を再フォーマットすることでした。主に私自身の正気を保つためですが、さらに重要なのは、要素<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();
    });
});

もう 1 つ — 私はあなたのload()方法をコメントアウトしました。

load() メソッドは、ソースまたはその他の設定を変更した後にオーディオ/ビデオ要素を更新するために使用されます -ソース

これは何よりも予防​​策でした。理論的には害はないはずですが、説明されている問題はロード/アンロードの問題に関連しているため、削除するのが最善だと思いました.

その他のオプション

あなたの質問へのコメントで、基本的にリサイクル可能なオブジェクトである1 つの <audio>要素をその場で再加工する可能性について言及しました。問題が解決しない場合は、1 つのインスタンスの動作をデバッグする方がはるかに簡単なため、このアプローチを検討する価値があるかもしれません。言うまでもなく、マークアップが少ないことは言うまでもありません。

于 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 に答える