3

jquery play() と pause() だけで mp3 を再生する、別の質問の中に小さなコード スニペットを見つけました。

<a href="#" rel="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
class="play">Play</a>

<div class="pause">Stop</div>

<script>

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    var source = $('.play').attr('rel');

    audioElement.setAttribute('src', source);
    //audioElement.setAttribute('autoplay', 'autoplay');
    audioElement.load()
    $.get();
    audioElement.addEventListener("load", function() {
    audioElement.play();
    }, true);

    $('.play').click(function() {
    audioElement.play();
    });


    $('.pause').click(function() {
    audioElement.pause();
    });
});

「再生」リンクの rel 属性からオーディオ ソースを取得します。ここで、さらにオーディオ リンクを追加し、ソースをその rel 属性に関連付けたいと思います。

私は試した

var source = $(this).attr('rel');

および .find() と .each() も使用しましたが、これまでのところ何も機能しませんでした。最初のオーディオ ファイルのみが再生される 2 つのオーディオ リンクでjsfiddleをセットアップしました。(フィドルは、jquery 1.4.3 のみがロードされているクライアントのサイトで使用する外部スクリプトにリンクしていますが、とにかく可能だと思います。オーディオ プレーヤー プラグインを使用したくないだけです。最小限のソリューションです。)

どんな助けでも大歓迎です！

4

1 に答える 1

0

スクリプトを更新して、コンテナーごとに 1 つのオーディオ タグを作成できます。

$(document).ready(function () {
    // For each container div
    $(".container").each(function() {
        // Create the HTML5 <audio> tag
        var audioElement = document.createElement('audio');
        // Find the play/pause buttons
        var $play = $(this).find(".play");
        var $pause = $(this).find(".pause");
        // Load the source from the play button
        var source = $play.attr('rel');
        audioElement.setAttribute('src', source);
        $.get();
        // Play the sound when loaded
        audioElement.addEventListener("load", function () {
            audioElement.play();
        }, true);        
        // When the user clicks on the play button, play the audio
        $play.click(function () {
            audioElement.play();
        });
        // When the user clicks on the pause button, pause it
        $pause.click(function () {
            audioElement.pause();
        });
    });
});

更新された Fiddle: http://jsfiddle.net/sY7UT/

于 2013-07-15T15:04:42.857 に答える