如何在DW中实现最简单的播放音频
在DW中如何实现音乐的播放呢？其实很简单，就是一句代码，用video标签来存放音乐，设置id用来控制音乐的停止和播放
<video src="音乐路径" id="hear"></video>
下面是实现简单的音乐播放代码
第一步：先把样式整理出来
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何在DW中实现最简单的播放音频</title>
</head>
<style>
#box_pause,#box_play{
width: 200px;
height:200px;
line-height: 200px; /*行高*/
text-align: center; /*文本居中*/
color:white; /*文字颜色为白色*/
margin: 200px auto; /*上下200个像素，左右居中*/
border-radius:50%; /*边框的圆角效果*/
}
#box_pause{
background: #E47274;
}
#box_play{
font-size: 25px; /*字体大小*/
}
@keyframes music{
0%{
transform: rotate(0deg); /*旋转0度*/
background: #5CD9CC; /*背景颜色*/
}
50%{
transform: rotate(180deg); /*旋转180度*/
background: #3AB4E0;
}
100%{
transform: rotate(360deg); /*旋转360度*/
background: #5CD9CC;
}
}
</style>
<body>
<div id="box_pause">点击这里会有惊喜哦^_^！</div>
<div id="box_play" style="display: none;">^_^
<video src="../../Music/周杰伦 - 稻香 [mqms2].mp3" id="hear"></video>
</div>
</body>
</html>
第二步：完成JS部分的样式：音乐的播放和停止
<script>
var box_pause=document.getElementById("box_pause");
var box_play=document.getElementById("box_play");
box_pause.onclick = function(){
box_play.style.display = "block";
box_pause.style.display = "none";
box_play.style.animation = "music 4s linear infinite"; /*调用函数*/
hear.play(); /*音乐的播放*/
};
box_play.onclick = function(){
box_play.style.display = "none";
box_pause.style.display = "block";
box_play.style.animation = "";
hear.pause(); /*音乐的停止*/
};
</script>
效果图：
看完了，你有收获吗？
来尝试一下做出你心目中的音乐播放样式吧！