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()
。但它也不起作用。然后我在某处读到使用事件侦听器是一种更好的做法。所以我尝试通过事件监听器来实现它。
发布于 2018-07-28 23:14:43
不需要包括音频标签。相反,你只需要在javascript中说出你想要播放的音频。
function myPlay(){
var audio = new Audio("sample.mp3");
audio.play();
}
当您执行此函数时,音频将会播放。
发布于 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();
}
发布于 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>
。
https://stackoverflow.com/questions/51572489
复制相似问题