简约的 play() 和 pause() 音频解决方案

Posted 2023-02-25

【中文标题】简约的 play() 和 pause() 音频解决方案

【英文标题】：Minimalistic play() and pause() audio solution

【发布时间】：2013-07-15 15:00:20

【问题描述】：

我在另一个问题中发现了一个小代码 sn-p，只用 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()，但到目前为止没有任何效果。我已经设置了一个带有两个音频链接的jsfiddle，其中只会播放第一个音频文件。 （小提琴链接到客户端在他的网站上使用的外部脚本，其中只加载了 jquery 1.4.3，但我想无论如何都是可能的。我只是不想使用音频播放器插件，我的目标是简约的解决方案。）

任何帮助将不胜感激！

【参考方案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/

【讨论】：

@Alani 没问题，如果对你有用，请标记为答案:)