我正在尝试让我的音频播放和暂停。我可以让它播放,但一直无法让它暂停。我使用键1、2、3和4播放不同的音频。基本上,如果我按下1键,它应该会播放,然后如果我再次按下1键,它应该会暂停。如果我已经在播放按键1的音频并按下了按键2,它应该会暂停按键1的音频并播放按键2的音频。我对这一切都很陌生,谢谢:)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Study Vibes</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keys">
<div data-key="49" class="key 1">
<kbd>Vol 1</kbd>
<span class="sound">Press 1</span>
</div>
<div data-key="50" class="key 2">
<kbd>Vol 2</kbd>
<span class="sound">Press 2</span>
</div>
<div data-key="51" class="key 3">
<kbd>Vol 3</kbd>
<span class="sound">Press 3</span>
</div>
<div data-key="52" class="key 4">
<kbd>Vol 4</kbd>
<span class="sound">Press 4</span>
</div>
</div>
<audio data-key="49" class="49" src="sounds/classic_lounge.m4a"></audio>
<audio data-key="50" class="50" src="sounds/swing_beats.m4a"></audio>
<audio data-key="51" class="51" src="sounds/rainy_days.m4a"></audio>
<audio data-key="52" class="52" src="sounds/summer_vibes.m4a"></audio>
<script>
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if(audio.play !== true){
audio.play();
} else if (audio.play === true){
audio.pause();
}
}
window.addEventListener('keydown', playSound);
</script>
</body>
</html>
发布于 2020-06-09 14:28:21
Fiddler示例(为了测试,我只包含了一个使用编号1的音频)
http://jsfiddle.net/wupcdv8f/3/
使用属性audio.paused
查看音频状态(播放中/未播放)。
以下是我所做的更改
if (audio.paused === true) {
// not playing
audio.play();
} else if (audio.paused !== true) {
// playing
audio.pause();
}
我猜问题是.play
属性不存在,但是有一个事件play
.using这个事件,你也可以切换音频状态。
https://stackoverflow.com/questions/62275758
复制相似问题