我已将音频添加到我的网站,该音频在打开网站时正在播放。现在,我想添加播放/暂停按钮来切换音频。
这是我尝试的方式:
<audio id="myAudio" autoplay >
<source src="mp3/background-music.mp4" type='audio/mp4'>
Your user agent does not support the HTML5 Audio element.
</audio>
<a type="button" class="play-pause" title="play/pause"><i class="fa fa-pause"></i></a>
<script type="text/javascript">
$(document).ready(function() {
var playing = false;
$('a.audio-btn').click(function() {
if (playing == false) {
document.getElementById('myAudio').play();
playing = true;
$(this).text("stop sound");
} else {
document.getElementById('myAudio').pause();
playing = false;
$(this).text("restart sound");
}
});
});
</script>
但是它对我不起作用。谁能告诉我我哪里出问题了?
答案 0 :(得分:1)
将您的$('a.audio-btn')
更改为$('a.play-pause')
。
答案 1 :(得分:1)
出于演示目的,我添加了video
标签,要使用音频,您可以将video
替换为audio
标签并使用
$('.play-pause')
代替
$('a.audio-btn')
要获得音频,请在video
标签处使用它:
<audio id="myAudio" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='audio/mp4'>
Your user agent does not support the HTML5 Audio element.
</audio>
$(document).ready(function () {
var playing = true;
$('.play-pause').click(function () {
if (playing == false) {
document.getElementById('myAudio').play();
playing = true;
$(this).text("Sop Sound");
} else {
document.getElementById('myAudio').pause();
playing = false;
$(this).text("Restart Sound");
}
});
});
a {
background: #000;
color: #fff;
cursor: pointer;
padding: 10px;
}
video {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myAudio" autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type='video/mp4'>
Your user agent does not support the HTML5 Audio element.
</video>
<a type="button" class="play-pause" title="play/pause">Play / Pause</a>
答案 2 :(得分:0)
到底什么不起作用?该按钮没有出现吗,不起作用?
我建议使用类似以下的内容:
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause()
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};