如何用JS实现音乐播放、暂停

最新推荐文章于 2025-03-29 09:05:13 发布

小幻奏

最新推荐文章于 2025-03-29 09:05:13 发布

阅读量1.3w

点赞数 16

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_44489400/article/details/87806512

版权

js 专栏收录该内容

4 篇文章

订阅专栏

刚开始学习的时候，我不懂怎么在HTML中播放音乐，后来才发现其实很简单的，只要一句代码配合js使用就OK了。好了请看下面的代码
源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="./css/Untitled-2.css">
</head>
<body>
	<div class="box">
		<img src="./images/01.jpg" alt="">
		<div class="tubiao" id="tb">
			<div class="tubiao1" id="tb1"></div>
			<div class="tubiao2" id="tb2" style="display: none;"></div>
		</div>
	</div>
	<video src="./羽岡佳 - 花火の夜に.mp3" loop preload="auto" id="music"></video>
	<script src="js/js.js"></script>
</body>
</html>

css部分：

@charset "utf-8";
/* CSS Document */
*{
	padding: 0px;
	margin: 0px;
}
.box{
	width: 350px;
	height: 500px;
	margin: 80px 40%;
	overflow: hidden;
	position: relative;
}
.box img{
	width: 350px;
	height: 500px;
}
.tubioa{
	width: 43px;
	height: 43px;
	cursor: pointer;
	position: absolute;
	top: 0px;
	right: 0px;
}
.tubiao1,.tubiao2{
	width: 43px;
	height: 43px;
	position: absolute;
	top: 0px;
	right: 0px;
}
.tubiao1{
	background: url(../images/02.png) 0px -44px no-repeat;
}
.tubiao2{
	background: url(../images/02.png) 0px 0px no-repeat;
	animation: TuBiao 3s linear infinite;
}
@keyframes TuBiao{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(180deg);}
	100%{transform: rotate(360deg);}
}

Js部分：

// JavaScript Document
var number=true;
var music=document.getElementById("music");
var tb=document.getElementById("tb");

tb.onclick=function(){
		if(number===false){
			 number=true;
			document.getElementById("tb1").style.display="block";
			document.getElementById("tb2").style.display="none";
		
			music.pause();
			 
		}else{
			document.getElementById("tb1").style.display="none";
			document.getElementById("tb2").style.display="block";
			number=false;
			music.play();
		}
	};