Question

我有以下代码，单击按钮时播放和暂停音频文件。这很好用，但我想在同一页面上添加更多带有不同音频的按钮。我如何从按钮而不是我现在正在执行的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>

Answer 1

也许这有帮助。

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

但似乎你的问题接近错误......

Answer 2

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

此代码适用于最新版本的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验证器进行了测试，它是有效的。通过这种方式，您可以添加所需的所有按钮，指定类＆＃34; soundBt＆＃34;并在按钮的name属性中设置文件名。在加载时，脚本将查找具有类＆＃34; soundBt＆＃34;的每个按钮。并为其添加一个播放name属性中的文件集的侦听器（您可以看到使用this关键字，因为addEventListener是按钮本身的一种方法）。显然，此代码不会检查文件是否存在，或者您是否在按钮中设置了name属性。你可以自己做这些检查;）

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

请告诉我这是否适合您！

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

2 个答案: