用纯javascript在点击事件上播放声音
用纯javascript在点击事件上播放声音
提问于 2018-07-28 22:53:09
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();
} ;第一个是一个按钮，其余的是锚标签。因为我只是不确定它会起什么作用。如果它不能与锚点一起工作，我也没问题，但它也不能与按钮一起工作。
我还使用了带有button标记的onclick()。但它也不起作用。然后我在某处读到使用事件侦听器是一种更好的做法。所以我尝试通过事件监听器来实现它。
回答 4
Stack Overflow用户
发布于 2018-07-28 23:14:43
不需要包括音频标签。相反，你只需要在javascript中说出你想要播放的音频。
function myPlay(){
var audio = new Audio("sample.mp3");
audio.play();
}当您执行此函数时，音频将会播放。
Stack Overflow用户
发布于 2018-07-28 23: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();
} Stack Overflow用户
发布于 2018-07-28 23: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>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51572489
复制相关文章
相似问题