JavaScript click 函数播放 mp3，不循环播放

Posted 2023-02-25

【中文标题】JavaScript click 函数播放 mp3，不循环播放

【英文标题】：JavaScript click Function play mp3s, not loop

【发布时间】：2013-07-02 17:59:02

【问题描述】：

我想创建一系列函数，用于存储单击时将播放的 mp3 文件。 例如。我想，比如说，点击#3播放某种声音或mp3，然后点击#5等，等等。

    var a1_Events = [newsound1, newcoolersound2, coolestsound3],
        a1_c = 0;

        function newsound1()

        // I would like to trigger a mp3 here. But not loop.


        function newcoolersound2()

        // I would like to trigger a mp3 here. But not loop.


        function coolestsound3()

        // I would like to trigger a mp3 here. But not loop.


    $('#area1').click(function()
       a1_Events[a1_c++ % a1_Events.length]();
    );

更新：

好的，所以，我想我有一个解决方案；但它看起来有点笨重——希望有更好的东西；但我的实施计划是将以下内容嵌套在 div 中，并通过上面的功能区域中的 show / hide onClick 显示按钮。

//mp3 File 1
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>

【问题讨论】：

我认为应该可以。

【参考方案1】：

这就是我之前的做法：

document.getElementById("sound").innerhtml=
  "<embed src=\"ding.wav\" hidden=\"true\" autostart=\"true\" loop=\"false\" ><source src=\"ding.ogg\"><source src=\"ding.mp3\"><source src=\"ding.aac\"></embed>";

您可以放置​​任何格式的文件（请注意某些浏览器不支持某种格式）。另一种选择是将此代码放在“div”元素中，然后在播放声音后将其删除。

【讨论】：

感谢@Paul，所以类似于为包含该代码的 div 实现“显示/隐藏”？

这行不通，因为每次播放声音时都必须创建一个新元素。每次触发事件时尝试打印一个新元素。