Home > Developer > Web Develop
I first Baidu search on the music player, and then saw the next, see there is jquery write, also have JS write, see the general idea, chose a modified a bit. JS is to find an online, add something.
I was especially careful when I played this thing at work and was afraid of being caught by my boss. Because can not spend too much time, just see the QQ Music button icon, also incidentally made a piece. Temporarily can play and change songs, do not listen to, have time to get the lyrics down.
This is the address on the line http://182.254.136.120:99/silas/mp3/demo.html
<meta charset= "Utf-8" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1" >
<style type= "Text/css" >
*{
margin:0;
padding:0;
border:0;
font-size:100%;
Font:inherit;
Vertical-align:baseline;
Font-family: "Microsoft Jas Black", Microsoft Yahei;
}
. fd-pr{
position:relative;
}
. fd-left {
Float:left;
Display:inline-block;
}
. fd-right {
Float:right;
Display:inline-block;
}
. fd-clr {
*zoom:1}
. fd-clr:after {
Display:block;
Clear:both;
height:0;
Content: "\0020"
}
. masonry-page-content{
position:relative;
width:550px;
margin:0 Auto;
Background: #2d2e30;
border-radius:3px;
}
. jp-interface{
position:relative;
width:300px;
height:60px;
margin-left:13px;
font-size:12px;
}
. jp-interface. tit{
margin-top:20px;
Color: #aaa;
}
#buffer {
Display:none;
Color: #aaa;
}
#btn-group{
margin-top:13px;
}
#btn-group #btn-player-pause{
width:39px;
height:39px;
Background:url (img/music-btn.png) -220px 0 no-repeat;
margin-right:13px;
Cursor:pointer;
}
#btn-group. btn-play{
Background:url (img/music-btn.png) -140px 0 no-repeat!important;
}
#btn-group. btn-play:hover{
Background:url (img/music-btn.png) -180px 0 no-repeat!important;
}
#btn-group #btn-prev{
width:33px;
height:33px;
Background:url (img/music-btn.png) -1px 0 no-repeat;
Cursor:pointer;
margin-top:3px;
margin-left:22px;
margin-right:14px;
}
#btn-group #btn-prev:hover{
width:33px;
height:33px;
Background:url (img/music-btn.png) -36px-1px no-repeat;
}
#btn-group #btn-next{
width:33px;
height:33px;
Background:url (img/music-btn.png) -70px 0 no-repeat;
Cursor:pointer;
margin-top:3px;
}
#btn-group #btn-next:hover{
width:33px;
height:33px;
Background:url (img/music-btn.png) -105px 0 no-repeat;
Cursor:pointer;
}
#container {
margin-top:5px;
width:200px;
height:3px;
border-radius:3px;
}
#stick {
height:3px;
width:0;
}
#name {
Color: #aaa;
}
. jp-img{
width:70px;
height:70px;
Text-align:center;
}
. jp-img img{
border-radius:50%;
width:40px;
height:40px;
margin-top:15px;
}
. jp-pic{
animation:9.5s linear 0s normal none infinite rotate;
-webkit-animation:9.5s linear 0s normal none infinite rotate;
}
@-webkit-keyframes rotate{
From{-webkit-transform:rotate (0DEG)}
To{-webkit-transform:rotate (360DEG)}
}
@-moz-keyframes rotate{
From{-moz-transform:rotate (0DEG)}
To{-moz-transform:rotate (360DEG)}
}
@-ms-keyframes rotate{
From{-ms-transform:rotate (0DEG)}
To{-ms-transform:rotate (360DEG)}
}
@-o-keyframes rotate{
From{-o-transform:rotate (0DEG)}
To{-o-transform:rotate (360DEG)}
}
</style>
<body>
<div class= "Masonry-page-content fd-clr" >
<audio id= "AUD" ></audio>
<div id= "Btn-group" class= "Fd-left" >
<button id= "Btn-prev" title= "prev" ></button>
<button id= "Btn-player-pause" title= "Play" ></button>
<button id= "Btn-next" title= "Play" ></button>
</div>
<div class= "Jp-img fd-left" >
</div>
<div class= "Jp-interface fd-left" >
<div class= >
Current song: <strong id= "Name" ></strong>
</div>
<div id= "Buffer" ></div>
<div id= "Container" >
<div id= "Stick" ></div>
</div>
</div>
</div>
<script src= "Js/mp3.js" ></script>
</body>
This is JS.
Window.onload=function () {
Index of the song currently playing
var currentindex=-1;
Player Element Object
var Audio=document.getelementbyid ("AUD");
Song list
var mlist=["Blank Space.mp3", "Lana Del Rey-young and Beautiful.mp3", "Wiz Khalifa-see you Again.mp3"];
Picture path
var imglist=["Blank.png", "Lana Del rey.jpg", "0039pp2w372jsm.jpg"];
Song Path
var msrc=["Blank Space.mp3", "Lana Del Rey-young and Beautiful.mp3", "Wiz Khalifa-see you Again.mp3"];
Progress bar
var Stick=document.getelementbyid ("Stick");
Picture rotation
var imgrotate = document.getElementById ("Jp-pic");
initialization function
function Finit () {
document.getElementById ("name"). Innerhtml=mlist[0];
}
Play Stop button
var Oplayorpause=document.getelementbyid ("Btn-player-pause");
Play or pause
Oplayorpause.onclick = function Fplaymusic () {
if (currentindex==-1) {
AUDIO.SRC=MSRC[0];
currentindex=0;
}
if (audio.paused) {
Audio.play ();
Oplayorpause.classname= ' Btn-play ';
oplayorpause.title= "Pause";
Imgrotate.classname = ' jp-pic ';
}else{
Audio.pause ();
Oplayorpause.classname= ";
Oplayorpause.title= "Play";
Imgrotate.classname = ";
}
}
Previous song
document.getElementById ("Btn-prev"). Onclick=function () {
if (Currentindex = = 0) {
Currentindex = mlist.length-1;
document.getElementById ("name"). Innerhtml=mlist[currentindex];
} else {
currentindex--;
document.getElementById ("name"). Innerhtml=mlist[currentindex];
}
IMGROTATE.SRC = ' img/' +imglist[currentindex];
AUDIO.SRC = Msrc[currentindex];
stick.style.width=0;
Audio.play ();
Imgrotate.classname = ' jp-pic ';
oplayorpause.title= "Pause";
Oplayorpause.classname= ' Btn-play ';
}
Next song
document.getElementById ("Btn-next"). Onclick=function () {
if (Currentindex = = (mlist.length-1)) {
Currentindex = 0;
document.getElementById ("name"). Innerhtml=mlist[0];
} else {
currentindex++;
document.getElementById ("name"). Innerhtml=mlist[currentindex];
}
IMGROTATE.SRC = ' img/' + imglist[currentindex];
AUDIO.SRC = Msrc[currentindex];
stick.style.width=0;
Audio.play ();
Imgrotate.classname = ' jp-pic ';
Oplayorpause.classname= ' Btn-play ';
oplayorpause.title= "Pause";
}
Play progress bar
Audio.addeventlistener (' Timeupdate ', function () {
if (!isnan (audio.duration)) {
var progressvalue = audio.currenttime/audio.duration*200;
Stick.style.width = parseint (progressvalue) + ' px ';
};
},false);
At the end of the song
Audio.addeventlistener (' Ended ', function () {
stick.style.width=0;
Oplayorpause.classname= ";
Oplayorpause.title= "Play";
Imgrotate.classname = ";
},false);
Determine if a song can play
Audio.addeventlistener (' Canplay ', function () {
var Buffer=document.getelementbyid ("buffer");
Buffer.style.display= "None";
},false);
Listening for songs is buffered
Audio.addeventlistener (' Loadstart ', function () {
var Buffer=document.getelementbyid ("buffer");
buffer.style.display= "Block";
Buffer.innerhtml= "getting data ...";
},false);
Initialization
Finit ();
}
JS Simple Music Playback
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
