似乎控件的暂停属性始终为true。我想要一个按钮来播放/暂停。它将播放音频,但不会暂停点击事件。
我想在第一次点击时播放按钮,然后在我再次点击时暂停。由于音频控制需要使用数据歌曲值来提供音频控制源,因此会有许多音轨。任何时候我编码检查数据歌曲它不会暂停。
<!DOCTYPE html>
<head>
<title>Test</title>
<script>
function playAudio()
{
var audio = document.getElementById('player');
var playbutton = document.getElementById('play');
var url = playbutton.getAttribute('data-song');
player.src = url;
if(audio.paused){
audio.play();
}
else
{
audio.pause();
}
}
</script>
</head>
<body>
<p id="play" onClick="playAudio()" data-song="rock.mp3" >play</p>
<audio controls id="player">
<source src="" type="audio/ogg">
<source src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
每次调用函数时,它都会再次设置音频源,其默认状态为“暂停”。将source属性放在音频标记中,如下所示:
<!DOCTYPE html>
<head>
<title>Test</title>
<script>
function playPause()
{
var audio = document.getElementById('player')
var playbutton = document.getElementById('play')
audio.controls = false
if(audio.paused){
audio.play()
playbutton.innerHTML = "stop"
}
else
{
audio.pause()
playbutton.innerHTML = "play"
}
}
</script>
</head>
<body>
<p id="play" onClick="playPause()" >play</p>
<audio id="player" src="lala.mp3"></audio>
</body>
</html>