用html js实现 单击文字然后播放音乐的功能 100
就是假设在空白页面上有一个字，然后鼠标单机一下就播放音乐，不会跳转，也不是那种出现一个播放器播放的那种，就是单纯的点下文字开始播放音乐。求大佬指点下，谢谢啦...
就是假设在空白页面上有一个字，然后鼠标单机一下就播放音乐，不会跳转，也不是那种出现一个播放器播放的那种，就是单纯的点下文字开始播放音乐。求大佬指点下，谢谢啦
展开
2个回答
展开全部
上代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio id="player">
<source src="092 AC DC - You Shook Me All Night Long.mp3"></source>
</audio>
<div style="width: 100%;text-align: center;"><span style="cursor: pointer;" id="start">开始</span></div>
<div style="width: 100%;text-align: center;"><span style="cursor: pointer;" id="stop">暂停</span></div>
</body>
<script type="text/javascript">
document.getElementById('start').onclick = function(){
player.play();
}
document.getElementById('stop').onclick = function(){
player.pause();
}
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
html5中使用audio标签，DOM里如下，文字是“播放”，当点击时，音乐播放，文字会变成"暂停"。两个文字会随着音乐是否播放而切换。这里需要注意的一点是audio的兼容性的问题。如果考虑其兼容性，可以看下这个经验：html5的audio如何兼容各浏览器实现自动播放
<audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3"></audio>
<p class="but">播放</p>
JS部分：
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice'); //获取到audio元素
$('.but').click(function() { //点击文字事件
if (voice.paused) { //判断音乐是否在播放中，暂停状态
voice.play(); //音乐播放
$('.but').text('暂停'); //切换文字
} else { //播放状态
voice.pause(); //音乐停止
$('.but').text('播放'); //切换文字
}
});
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
