使用纯 javascript 在点击事件上播放声音
[英]playing sound on click event with pure javascript
问题描述
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<audio id="sounds" loop= "false" volume = "60">
<source src="sounds/clap.wav" id="A" type="audio/wav">
<source src="sounds/boom.wav" id="S" type="audio/wav">
<source src="sounds/hihat.wav" id="D" type="audio/wav">
<source src="sounds/kick.wav" id="F" type="audio/wav">
<source src="sounds/snare.wav" id="G" type="audio/wav">
<source src="sounds/ride.wav" id="H" type="audio/wav">
<source src="sounds/tom.wav" id="J" type="audio/wav">
</audio>
<div class="keys">
<div class="key">
<button id="common1" class="key_link" type="submit">CLAP</button>
</div>
<div class="key">
<a href="#" id="common2" type="button" class="key_link">BOOM</a>
</div>
<div class="key">
<a href="#" id="common3" class="key_link">HIHAT</a>
</div>
<div class="key">
<a href="#" id="common4" type="submit" class="key_link">KICK</a>
</div>
<div class="key">
<a href="#" id="common5" type="submit" class="key_link">SNARE</a>
</div>
<div class="key">
<a href="#" id="common6" type="submit" class="key_link">RIDE</a>
</div>
<div class="key">
<a href="#" id="common7" type="submit" class="key_link">TOM</a>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Javascript：
var button = document.getElementById('common1'); //
button.addEventListener('click', myPlay);
function myPlay() {
var a = document.getElementById('A');
a.play();
} ;
第一个是按钮，其余的是锚标签。 因为我只是不确定它会起作用。 如果它不适用于锚点，那对我来说没问题，但它也不适用于按钮。
我还使用了带有按钮标签的onclick() 。 但它也没有奏效。 然后我在某处读到使用事件侦听器是更好的做法。 所以我试图通过事件侦听器来实现它。
4 个解决方案
解决方案1
7 2018-07-28 15:14:43
不需要包含音频标签。 相反，您可以在 javascript 中说出您想要播放的音频。
function myPlay(){
var audio = new Audio("sample.mp3");
audio.play();
}
当您执行此功能时，音频将播放。
解决方案2
1 2018-07-28 15:28:06
您使用document.getElementById获取了错误的元素。 您的音频标签的 id 是sounds ，但您正在尝试使用 id A获取它。
改变
function myPlay() {
var a = document.getElementById('A');
a.play();
};
到
function myPlay() {
var a = document.getElementById('sounds');
a.play();
}
解决方案3
0 2018-07-28 15:26:38
<source> html 标签的目的不是指向不同的音频内容，而是指向不同格式的相同音频内容，以便浏览器可以选择更合适的格式。
所以你应该有这样的东西：
<audio id="clap" loop= "false" volume = "60">
<source src="sounds/clap.wav" id="A" type="audio/wav">
</audio>
<audio id="boom" loop= "false" volume = "60">
<source src="sounds/boom.wav" id="S" type="audio/wav">
</audio>
...
如果你想为相同的声音提供不同的格式，你可以有这样的东西：
<audio id="clap" loop= "false" volume = "60">
<source src="clap.mp3" type="audio/mpeg">
<source src="clap.wav" type="audio/wav">
</audio>
你应该这样做：
var clap = document.getElementById("clap");
clap.play();
考虑到它是来自您可以调用play()的<audio> html 标签，而不是来自<source> 。
解决方案4
0 2018-07-28 17:44:02
试试这个例子， https://jsfiddle.net/nerdvoso/46f7rxbs/1/
以下代码：
var playBtn = document.getElementById('play'); var stopBtn = document.getElementById('stop'); var playSound = function() { audio.play(); }; playBtn.addEventListener('click', playSound, false); stopBtn.addEventListener('click', function(){audio.pause()}, false);
<audio id="audio" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio> <button id="play">Play</button> <button id="stop">Stop</button>
更新， https://jsfiddle.net/nerdvoso/46f7rxbs/33/
var playBtn = document.getElementById('play'); var stopBtn = document.getElementById('stop'); var nextBtn = document.getElementById('next'); var prevBtn = document.getElementById('prev'); var soundSelected = document.getElementById("audio1"); var playSound = function() {soundSelected.play();}; var stopSound = function() {soundSelected.pause();}; var nextSound = function() { if(soundSelected.nextElementSibling){ soundSelected.pause(); soundSelected.currentTime = 0; soundSelected = soundSelected.nextElementSibling; } }; var prevSound = function() { if(soundSelected.previousElementSibling){ soundSelected.pause(); soundSelected.currentTime = 0; soundSelected = soundSelected.previousElementSibling; } }; playBtn.addEventListener('click', playSound, false); stopBtn.addEventListener('click', stopSound, false); nextBtn.addEventListener('click', nextSound, false); prevBtn.addEventListener('click', prevSound, false);
<div id="playList"> <audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio> <audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio> </div> <button id="prev">Prev</button> <button id="play">Play</button> <button id="stop">Stop</button> <button id="next">Next</button>
通过专用按钮播放声音，在此处输入链接描述
var playSoundBtn = document.getElementsByClassName("playSound"); var playSound = function() { var attribute = this.getAttribute("data-sound"); var sounds = document.getElementsByTagName('audio'); for(i=0; i<sounds.length; i++){ sounds[i].pause(); sounds[i].currentTime = 0; } document.getElementById(attribute).play(); }; for (var i = 0; i < playSoundBtn.length; i++) { playSoundBtn[i].addEventListener('click', playSound, false); }
<audio id="audio1" src="https://freewavesamples.com/files/Roland-JV-2080-101-Bass-C2.wav" preload="auto"></audio> <audio id="audio2" src="https://freewavesamples.com/files/Yamaha-V50-Metalimba-C2.wav" preload="auto"></audio> <hr> <button class="playSound" data-sound="audio1">Sound 1</button> <button class="playSound" data-sound="audio2">Sound 2</button>
在javascript事件中播放声音
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.