使用当前音频 javascript 创建播放/暂停功能

Posted 2023-02-25

【中文标题】使用当前音频 javascript 创建播放/暂停功能

【英文标题】：Creating play/pause functions with current audio javascript

【发布时间】：2017-05-20 08:26:04

【问题描述】：

我有一个正在开发的 chrome 扩展，我有一个 html 弹出窗口，其中包含播放音频的按钮。我不认为我的方法是最优雅的，我在探索缩小它的方法时遇到了麻烦。我知道这是非常低效的。我希望能够知道在 HTML 页面上单击了哪个按钮，然后使用该 ID 播放具有相同 ID 的音频文件。我现在拥有的方式是在 javascript 中使用 EventListener 来使用多个函数来停止或播放。有没有办法通过 javascript 或 jquery 将所有这些放在一个函数中来解决这种混乱？ 由于我在 chrome 扩展程序上执行此操作，因此无法在 HTML 文档中使用 Javascript。

目前我的 HTML 是这样的；

    <script type="text/javascript" src="js/audio.js"></script>

    <a href="#" class="myButton" id="stopbutton">Stop Audio</a> 
    <a href="#" class="myButton" id="aud1">Audio 1</a>
    <a href="#" class="myButton" id="aud2">Audio 2</a>
    <a href="#" class="myButton" id="aud3">Audio 3</a>

我的 JS 文件像这样为我的音频文件创建变量。

    var aud1 = new Audio();
    var aud2 = new Audio();
    var aud3 = new Audio();

随着使用对应名称选择按钮时开始播放的函数。

    function aud1play() 
        aud1.src = "mp3/aud1.mp3";
        aud1.play();
    
    document.getElementById('aud1').addEventListener('click', aud1play);

    //you get the trend

要停止我的音频，我有以下功能：

    function audstop() 
        aud1.pause;
        aud2.pause;
        aud3.pause;
    document.getElementById('stopbutton').addEventListener('click', audstop);

【参考方案1】：

var audios= Array.prototype.map.call(document.getElementsByClassName("myButton"),function(el)
    var audio=new Audio();
    audio.preload="none";//=> not preloaded
    audio.src="mp3/"+el.id+".mp3";
    el.onclick=audio.play.bind(audio);
    return audio;
);

只需遍历您的按钮，为其创建一个具有正确 src 的音频元素，并将 onclick 侦听器绑定到其播放功能。然后映射音频元素。

document.getElementById('stopbutton').addEventListener('click', function()
    audios.forEach(audio=>audio.pause());
);

要停止，只需遍历音频元素并在每个元素上调用停止函数...

【讨论】：

您能稍微解释一下停止功能吗？它应该如何检测当前歌曲？

@Collin Willson 它只是停止所有歌曲...（它与您的停止功能相同，但它更干...）

啊，有道理。它在测试中不起作用，它在控制台中显示“audio.stop 不是函数”

我将 .stop 更改为 .pause ，现在可以使用了。非常感谢！

@Collin Willson 哦，抱歉打错了……不客气；）