2021-02-10JavaScript实现简单音乐播放器

最新推荐文章于 2022-06-19 15:43:04 发布

bgt2314

最新推荐文章于 2022-06-19 15:43:04 发布

阅读量212

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/bgt2314/article/details/113785041

版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<link rel="stylesheet" href="css/music.css">

</head>

<body>

<audio src="" id="mymusic"></audio>

<div class="music">

<div class="pic_div"> <img src="images/music/pictures/disc.png" alt="" class="disc"> <img src="images/music/pictures/default.jpg" alt="" id="music_pic"> <span class="dot"></span>

<div class="music_program">

<div id="prograss"></div>

</div>

<div class="time">

<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p>

</div>

<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>

</div>

</body>

<script src="js/music.js"></script>

</html>

先建好基本的HTML框架。

<audio src="" id="mymusic"></audio>为我们的音频
<div class="music">...</div>里面的部分为音乐的控件以及进度条，图片等。
<img src="images/music/pictures/disc.png" alt="" class="disc">为旋转的碟片
<img src="images/music/pictures/default.jpg" alt="" id="music_pic">为音乐专辑图片
<span class="dot"></span>为碟片中间的小圆点
<div class="music_program"><div id="prograss"></div></div>
我们通过DIV嵌套一个div来作为音乐的进度条（图片红色部分），第一个div固定宽度，第二个div用%来设置宽度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 为时间显示播放时长和总时长
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
控制菜单按钮上一曲播放/暂停下一曲

下面是具体的css代码

@charset "utf-8";

/* CSS Document */

.music {

height: 150px;

width: 150px;

background:rgba(98,91,91,0.9);

}

.pic_div {

position: relative;

}

.dot {

width: 15px;

height: 15px;

background: #464545;

position: absolute;

border: 2px solid white;

border-radius: 50%;

top: 40px;

left: 85px;

}

.disc {

width: 100px;

position: absolute;

right: 5px;

transform: rotate(30deg);

}

#music_pic {

width: 100px;

position: absolute;

}

.music_program {

height: 2px;

width: 100px;

background: #555;

position: relative;

top: 100px;

}

.music_program div {

height: 100%;

width: 0%;

background: red;

}

.time {

width: 100px;

height: 20px;

position: relative;

top: 85px;

overflow: hide;

}

.time p {

padding-left: 33px;

}

.time p span:nth-of-type(2) {

padding: 0 5px;

}

.music_menu {

width: 150px;

height: 25px;

position: relative;

top: 85px;

}

.music_menu span {

width: 30px;

height: 25px;

display: inline-block;

cursor: pointer;

}

.music_menu span:nth-of-type(1) {

margin-left: 8px;

background: url(../images/music/pictures/back.png) no-repeat 7px;

}

.music_menu span:nth-of-type(2) {

margin-left: 14px;

background: url(../images/music/pictures/play.png) no-repeat 10px;

}

.music_menu span:nth-of-type(3) {

margin-left: 14px;

background: url(../images/music/pictures/forward.png) no-repeat 7px;

}

接下来是最重要的Js部分！

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

// JavaScript Document

var music=document.getElementById("mymusic");

var prograss=document.getElementById("prograss");

var curtxt=document.getElementById("currenttime");

var duration=document.getElementById("duration");

var music_pic=document.getElementById("music_pic");

var deg=0;//旋转角度

var disctimer,prograsstimer;//碟片计时器,进度条计时器

var musicindex=0;//音乐索引

var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音乐数组

var music_pics=new Array("000002","000001","000001");

//旋转碟片

var disc=document.getElementsByClassName('disc');

//音乐时间显示

function curtime(txt,misic)

{

if(music.currentTime<10)

{

txt.innerHTML="0:0"+Math.floor(music.currentTime);

}else

if(music.currentTime<60)

{

txt.innerHTML="0:"+Math.floor(music.currentTime);

}

else

{

var minet=parseInt(music.currentTime/60);

var sec=music.currentTime-minet*60;

if(sec<10)

{

txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);

}

else

{

txt.innerHTML="0"+minet+":"+parseInt(sec);

}

//播放暂停

function playPause()

{

var btn=document.getElementById("playbtn");

if(music.paused)

{

music.play();

clearInterval(disctimer);//清除碟片的定时器

btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改变播放暂停键的图标

disctimer=setInterval(function(){

disc[0].style.transform="rotate("+deg+"deg)";

deg+=5;

//每秒设置进度条长度

},100);

prograsstimer=setInterval(function(){

prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";

curtime(curtxt,music);

if(music.currentTime>=music.duration-1)//片尾跳转下一曲

{

musicindex++;//音乐索引加一

if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零

{

musicindex=0;

}

getMusic();

music.play();//重载音乐后进行播放

}

},1000);

}

else

{

music.pause();//停止音乐

btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";

clearInterval(disctimer);//清除碟片滚动的定时器

clearInterval(prograsstimer);//清除进度条的定时器

}

//下一曲

function nextMusic()

{

musicindex++;//音乐索引加一

if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零

{

musicindex=0;

}

getMusic();

music.play();

}

//上一曲

function backMusic()

{

musicindex--;

if(musicindex<0)//如果索引小于0，将索引变为最大值

{

musicindex=musics.length-1;

}

getMusic();

music.play();

}

//读取音乐

function getMusic()

{

music.src="images/music/"+musics[musicindex];//改变音乐的SRC

music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";

if(music.readyState="complete")

{

setTimeout(function(){

duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);

},1000);//一秒后读取音乐的总时长

}

window.onload=function(){

getMusic();

}

bgt2314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-02-10JavaScript实现简单音乐播放器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/music.css"> </head> <body> <audio src="" id...
复制链接

扫一扫