JavaScript的音频 - 页面上的多个播放按钮，独立的音频文件 [英] Javascript Audio -- multiple play buttons on page with separate audio files
问题描述
我有以下的code，播放，并单击按钮时暂停的音频文件。这工作得很好，但我想在同一个页面上不同的音频添加更多按钮。如何从按钮，而不是我的javascript内，我现在所做的控制audio.src？
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;风格＆GT;
身体{背景：＃666; }
按钮{边界：无;光标：指针;概述：无; }
按钮＃playpausebtn {
背景：网址（图像/ play.jpg）不重复;
宽度：200像素;
高度：200像素;
}
＆LT; /风格＆GT;
＆LT;脚本＆GT;
//主播放功能
VAR音频，playbtn;
功能播放器（）{
音频=新的音频（）;
audio.src =音频/ losing.mp3
//设置对象引用
playbtn =的document.getElementById（playpausebtn）;
//添加事件处理
playbtn.addEventListener（点击，playPause）;
//功能
功能playPause（）{
如果（audio.paused）{
audio.play（）;
playbtn.style.background =网址（图片/ pause.jpg）不重复;
}其他{
audio.pause（）;
playbtn.style.background =网址（图片/ play.jpg）不重复;
}
}
}
window.addEventListener（负荷，播放器）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮ID =playpausebtn＆GT;＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您可以添加一个属性（如您指定要播放的文件），并把所有的按钮在同一个班级，然后和javascript得到所有的按钮类，然后添加播放您从属性得到该文件的事件监听。
如果你不明白，我可以指定更多详情！我不是在PC，现在对其进行测试：（
这code工作在Safari上的最后一个版本，但我认为它应该在任何浏览器工作：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;及音板LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮类=soundBtNAME =xxx.mp3＆GT; XXX和LT; /按钮＆GT;
＆LT;按钮类=soundBtNAME =yyy.mp3＆GT; YYY＆LT; /按钮＆GT;
＆LT;脚本＆GT;
window.addEventListener（加载，setListeners（））;
/ *此行dinamically增加了一个方法String对象
*对对象的原型工作
* /
String.prototype.endsWith =功能（后缀）{
返回this.indexOf（后缀，this.length - suffix.length）== -1！;
};
VAR音频=新的音频（）;
功能setListeners（）{
变种索引= 0;
VAR键= document.getElementsByClassName（soundBt）;
对于（指数= 0;指数 - LT; buttons.length;指数++）{
VAR按钮=按钮[指数]
button.addEventListener（点击，函数（）{
VAR键= document.getElementsByClassName（soundBt）;
变种索引= 0;
对于（指数= 0;指数 - LT; buttons.length;指数++）{
按钮[指数] .style.background =网址（图片/ play.jpg）不重复;
}
如果（audio.paused）{
VAR fileToPlay = this.getAttribute（名称）;
audio.src = fileToPlay;
audio.play（）;
this.style.background =网址（图片/ pause.jpg）不重复;
}
其他{
audio.pause（）;
this.style.background =网址（图片/ play.jpg）不重复;
}
}）;
}
}
audio.addEventListener（结束功能（）{
VAR键= document.getElementsByClassName（soundBt）;
变种索引= 0;
对于（指数= 0;指数 - LT; buttons.length;指数++）{
VAR按钮=按钮[指数]
VAR BUTTONNAME = button.getAttribute（名称）;
VAR audiosrc = audio.src;
如果（audio.src.endsWith（BUTTONNAME））{
button.style.background =网址（图片/ play.jpg）不重复;
返回;
}
}
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我在Safari，Chrome和Firefox进行了测试。我不使用任何奇怪的JS功能，所以应该在支持音频对象的任何浏览器。
我甚至测试它反对W3C验证，它是有效的。
通过这种方式，您可以添加你想要的所有按钮，指定类soundBt并设置了按钮的名称属性的文件名。
在加载脚本将寻找每一个有阶级按钮soundBt和一个监听器添加到它是起着name属性设置的文件（你可以看到使用了该关键字的作品，因为的addEventListener是按钮的方法本身）。显然，这code没有文件是否存在，或检查你设置的按钮的名称属性。你可以自己做这些检查;）
在这个版本中，我添加了背景变化时的声音结束播放按钮，反正这可以解决，如果你有很多的按钮（DOM解析重）变得很慢。如果你有效率问题，你可以尝试把所有的按钮在全球地图，其中键是文件名（或按钮名称）和值是按钮本身。
让我知道这对你的作品！
I have the following code that plays and pauses an audio file when the button is clicked. This works fine, but I want to add more buttons with different audio on the same page. How do I control the audio.src from the button instead of within my javascript as I am doing now?
<!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>
You could add a property (where you specify the file to be played) and put all buttons in the same class then in the Javascript get all the buttons of that class and then add a eventlistener that plays the file that you get from the property. If you don't understand i can specify more details! I'm not at the pc right now to test it :(
This code works on the last version of Safari, but I think it should work in any browser:
<!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>
I tested it in safari, chrome and firefox. I don't use any strange js feature so it should work in any browser that supports the Audio object. I even tested it against w3c validator and it's valid. In this way you can add all the buttons you want, specifying the class "soundBt" and setting the filename in the name attribute of the button. At load the script will look for every button that has class "soundBt" and add a listener to it that plays the file set in the name attribute (you can see the use of the this keyword that works because addEventListener is a method of the button itself). Obviously this code doesn't check if the file exists or if you've set a name attribute in the button. You can do these checks yourself ;)
In this version I added the change background to the play button when the audio is ended, anyway this solution may become really slow if you have a lot of buttons (DOM parsing is heavy). If you have efficiency issues you could try to put all the buttons in a global map where the keys are the filenames (or button names) and the values are the buttons themselves.
Let me know if this works for you!
这篇关于JavaScript的音频 - 页面上的多个播放按钮，独立的音频文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
