Javascript 音频——页面上有多个播放按钮，带有单独的音频文件答案

【问题标题】：Javascript Audio -- multiple play buttons on page with separate audio filesJavascript 音频——页面上有多个播放按钮，带有单独的音频文件
【发布时间】：2014-12-01 15:31:00
【问题描述】：

我有以下代码在单击按钮时播放和暂停音频文件。这很好用，但我想在同一页面上添加更多具有不同音频的按钮。如何像现在这样从按钮而不是在我的 javascript 中控制 audio.src？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ background:#666; }
button{ border:none; cursor:pointer; outline:none; }
button#playpausebtn{
    background:url(images/play.jpg) no-repeat;
    width:200px;
    height:200px;
}
</style>
<script>
// Main Player Function
    var audio, playbtn;
    function player(){
    audio = new Audio();
    audio.src = "audio/losing.mp3";
    // Set object references
    playbtn = document.getElementById("playpausebtn");
    // Add Event Handling
    playbtn.addEventListener("click",playPause);
    //Functions
    function playPause(){
        if(audio.paused){
            audio.play();
            playbtn.style.background = "url(images/pause.jpg) no-repeat";
        } else {
            audio.pause();
            playbtn.style.background = "url(images/play.jpg) no-repeat";
        }
    }
}
window.addEventListener("load", player);
</script>
</head>
<body>
<button id="playpausebtn"></button>
</body>
</html>

【问题讨论】：

标签： javascript audio

【解决方案1】：

您可以添加一个属性（在其中指定要播放的文件）并将所有按钮放在同一个类中，然后在 Javascript 中获取该类的所有按钮，然后添加一个事件监听器来播放您从中获取的文件财产。如果您不明白，我可以指定更多详细信息！我现在不在电脑前测试它:(

此代码适用于 Safari 的最新版本，但我认为它应该适用于任何浏览器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>soundboard</title>
    </head>
    <body>
        <button class="soundBt" name="xxx.mp3">xxx</button>
        <button class="soundBt" name="yyy.mp3">yyy</button>
    <script>
    window.addEventListener("load", setListeners());
    /* this line dinamically adds a method to the String object 
     * working on the prototype of the object
     */
    String.prototype.endsWith = function(suffix) {
    return this.indexOf(suffix, this.length - suffix.length) !== -1;
    };
    var audio = new Audio();
    function setListeners(){
      var index = 0;
        var buttons = document.getElementsByClassName("soundBt");
        for (index = 0; index < buttons.length; index++){
            var button = buttons[index];
            button.addEventListener("click", function(){
                var buttons = document.getElementsByClassName("soundBt");
                var index = 0;
                for (index = 0; index < buttons.length; index++){
                    buttons[index].style.background = "url(images/play.jpg) no-repeat";
                }
                if(audio.paused){
                    var fileToPlay = this.getAttribute("name");
                    audio.src = fileToPlay;
                    audio.play();
                    this.style.background = "url(images/pause.jpg) no-repeat";
                } 
                else{ 
                    audio.pause();
                    this.style.background = "url(images/play.jpg) no-repeat";
                }
            });
        }
    }
    audio.addEventListener("ended", function(){
        var buttons = document.getElementsByClassName("soundBt");
        var index = 0;
        for (index = 0; index < buttons.length; index++){
            var button = buttons[index];
            var buttonName = button.getAttribute("name");
            var audiosrc = audio.src;
            if (audio.src.endsWith(buttonName)){
                button.style.background = "url(images/play.jpg) no-repeat";
                return;
            }
        }
    });
    </script>
    </body>
</html>

我在 safari、chrome 和 firefox 中对其进行了测试。我不使用任何奇怪的 js 功能，因此它应该可以在任何支持 Audio 对象的浏览器中工作。我什至针对 w3c 验证器对其进行了测试，它是有效的。通过这种方式，您可以添加所需的所有按钮，指定类“soundBt”并在按钮的名称属性中设置文件名。在加载时，脚本将查找每个具有“soundBt”类的按钮，并为其添加一个监听器，播放在 name 属性中设置的文件（您可以看到 this 关键字的使用，因为 addEventListener 是按钮的一个方法本身）。显然，这段代码不会检查文件是否存在，或者您是否在按钮中设置了名称属性。您可以自己进行这些检查；）

在这个版本中，我在音频结束时为播放按钮添加了更改背景，无论如何，如果你有很多按钮，这个解决方案可能会变得非常慢（DOM 解析很重）。如果您遇到效率问题，您可以尝试将所有按钮放在全局映射中，其中键是文件名（或按钮名称），值是按钮本身。

让我知道这是否适合你！

【讨论】：

我尝试将音频文件名分配给按钮标签内的“数据轨道”，然后使用 getAttribute 将其带回 JavaScript。我可以让一个按钮工作，但没有更多。我从未使用过 getAttribute，但似乎它只适用于第一个按钮。
是的，谢谢，确实有效。我现在唯一的问题是播放/暂停功能。我为按钮添加了一个 id，以便我可以使用 css 控制外观，但是当第一个按钮正在播放音频并且您单击它暂停时，“pause.jpg”图像会显示在第二个按钮上。如果我添加第三个按钮，它会显示在那里。如果您没有实际的播放/暂停图像，您可能没有注意到它。你是怎么解决的？
我想我刚刚通过将“button.style.background”更改为“this.style.background”解决了我自己的问题，现在按钮的行为符合预期。还有一个问题：当我单击一个按钮并且音频播放到最后时，如何让图像切换回“play.jpg”？现在它完成后只会放在“pause.jpg”图像上。
是的，这个代替按钮是方法。要更改背景，我认为您应该将EventListener 添加到音频对象，当它停止播放时（应该有一个事件），您阅读audio.src，查找具有该名称的按钮并更改其背景。我无法编码，因为我现在正在打电话。但我认为解释比做更难；）
我会玩弄它的。如果我弄清楚了，我会发布它。

【解决方案2】：

也许这会有所帮助。

http://developer.appcelerator.com/question/84241/dynamically-assign-listener-to-button

但您似乎遇到了错误的问题......

【讨论】：