HTML，js自制MP3音频播放器

最新推荐文章于 2021-07-09 22:58:23 发布

Fish北冥

最新推荐文章于 2021-07-09 22:58:23 发布

阅读量624

点赞数

分类专栏： JS CSS 文章标签： javascript html jquery css

本文链接：https://blog.csdn.net/qq_42400124/article/details/116491001

版权

JS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

CSS

21 篇文章 2 订阅

订阅专栏

HTML，js自制音频播放器

示意图
MP3示意图
演示效果

MP3音频播放器

文件结构
结构块

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>音频播放器</title>
		<style type="text/css">
			a{text-decoration: none;display: block;width: 50px;height: 30px;background-color: powderblue;float: left;text-align: center;border-radius: 5px;margin: 0px 5px;line-height: 30px;color: white;font-size: 12px;}
			a:hover{color: cornflowerblue;background-color: aliceblue;}
			#box{position: relative;margin: 50px 500px;}
			#imgBox time{position: absolute;bottom: 75px;left: 225px;}
			#imgBox h4{position: absolute;top: 20px;left: 180px;}
			#but{position: absolute;bottom: 15px;left: 135px;}
		</style>
	</head>
	<body>
		<audio id="music" loop="loop" src="music/谢春花 - 借我.mp3">
			您的浏览器不支持audio标签
		</audio>
		<div id="box">
			<div id="imgBox">
				<h4 id="name">谢春花 - 借我</h4> 
				<img src="img/yy.jpg" />
				<time id="time">00:00</time>
			</div>
			<div id="but">
				<a href="###" id="prev">上一曲</a>
				<a href="###" id="paly">播放</a>
				<a href="###" id="next">下一曲</a>
				<a href="###" id="mute">静音</a>
			</div>
		</div>
	</body>
</html>

js代码

var PREV=document.getElementById("prev")
var PALY=document.getElementById("paly")
var NEXT=document.getElementById("next")
var MUTE=document.getElementById("mute")
var MUSIC=document.getElementById("music")
var TIME=document.getElementById("time")
var SRC=document.getElementById("src")

PALY.onclick=function(){
	if (music.paused) {
		music.play();
		this.innerText="暂停"
	} else{
		music.pause();
		this.innerText="播放"
	}
}

MUSIC.addEventListener("timeupdate",function(){
	var tt=Math.floor(MUSIC.duration);
	var s=00;
	var m=00;
	m=parseInt(tt/60);
	s=tt-m*60;
	
	TIME.innerText=Math.floor(MUSIC.currentTime)+"/"+m+":"+s;
})


var musicArr = new Array();
musicArr = ["谢春花 - 借我","戚薇 - 雨天","何洁 - 你是我的风景"]; //歌单
var num = 0;
var musicname = document.getElementById("name");  //歌名根据播放歌曲变化
//	上一首
PREV.onclick = function(){
		num = (num +2)%3;
	 	MUSIC.src ="music/"+musicArr[num]+".mp3";
	 	musicname.innerHTML = musicArr[num];
		MUSIC.play();
	}
	
//			下一首
NEXT.onclick = function(){
	 	num = (num +1)%3;
	 	MUSIC.src = "music/"+musicArr[num]+".mp3";
	 	musicname.innerHTML = musicArr[num];
		MUSIC.play();
	}

//				自动播放下一首
MUSIC.addEventListener('ended', function () {  
  	 		NEXT.onclick();
	}, false);

MUTE.onclick=function(){
	if (MUSIC.muted) {
		MUSIC.muted=false;
		this.innerText="静音";
	} else{
		MUSIC.muted=true;
		this.innerText="取消静音";
	}
}

Fish北冥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML，js自制MP3音频播放器

HTML，js自制音频播放器示意图演示效果文件结构HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>音频播放器</title> <style type="text/css"> a{text-decoration: none;display: block;width: 50px;height: 30px;ba
复制链接

扫一扫

专栏目录