如何用JS实现音乐播放、暂停-白红宇的个人博客

发布日期：2021-05-04 19:01:45 浏览次数：27 分类：原创文章

本文共 1786 字，大约阅读时间需要 5 分钟。

刚开始学习的时候，我不懂怎么在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 Documentvar 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();		}	};

让我们看下效果：
没点击，就不播放音乐
在这里插入图片描述
点击后，播放音乐并旋转图标

其实就是用video标签来存放音乐，然后用js控制播放、暂停。好了看完上面的代码，你学会了没有呀。

上一篇：轮播有可能出现的问题

下一篇：使用While循环语句值得注意的事

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章