DW实现手机端播放音乐效果

最新推荐文章于 2023-11-20 18:00:00 发布

玖.儿

最新推荐文章于 2023-11-20 18:00:00 发布

阅读量684

点赞数

本文链接：https://blog.csdn.net/weixin_44484756/article/details/108355321

版权

1、首先来看一下文件夹有哪些
在这里插入图片描述
因为要把制作好的网页发到手机上进行查看。所以这些必要的文件也要一起打包好传输到手机上，假如单单只是把网页发送到手机，打开是没有效果的，不过你的音乐是个网上链接的话，是可以实现的。
效果图：
点击红色圆圈音乐开始播放，变成图二，再点击一下，音乐停止播放，变成图一，再点击音乐会继续上一次的播放。
在这里插入图片描述

在这里插入图片描述
实现代码：
这是完整的代码，直接复制粘贴到DW里面查看效果就可以了。
注意：因为是在手机上播放音乐的，所以不能使用video标签，要使用audio标签，否则是没有音乐的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title> 
</head>
<style>
	#box_pause,#box_play{
		width: 500px;
    height: 500px;
		line-height: 500px; /*行高*/
		text-align: center; /*文本居中*/
		color:white; /*文字颜色为白色*/
		margin: 200px auto; /*上下两百个像数，左右居中*/
		border-radius:50%; /*边框的圆角效果*/
	}
	#box_pause{
		background: #E47274;
	}
	#box_play{
		font-size: 40px; /*字体大小*/
	}
	@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" style="font-size: 40px;">点击这里会有惊喜哦^_^！</div>
	<div id="box_play" style="display: none;">周杰伦 - 稻香
		<audio src="music/周杰伦 - 稻香 [mqms2].mp3" id="hear"></audio>
	</div>
	<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>
</body>
</html>

玖.儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
DW实现手机端播放音乐效果

1、首先来看一下文件夹有哪些因为要把制作好的网页发到手机上进行查看。所以这些必要的文件也要一起打包好传输到手机上，假如单单只是把网页发送到手机，打开是没有效果的，不过你的音乐是个网上链接的话，是可以实现的。效果图：点击红色圆圈音乐开始播放，变成图二，再点击一下，音乐停止播放，变成图一，再点击音乐会继续上一次的播放。实现代码：这是完整的代码，直接复制粘贴到DW里面查看效果就可以了。注意：因为是在手机上播放音乐的，所以不能使用video标签，要使用audio标签，否则是没有音乐的。<!
复制链接

扫一扫