js 简单的音乐播放
2015-11-11 15:46
411 查看
我先百度搜搜了关于音乐播放器，然后看了下，看到有jquery的写的，也有js写的，看了大致思路，选了一个修改了一下。js是找了一个网上，添加了点东西。
（题外话）上班时间玩这个东西就怕被老板抓到，所以我还是特别小心的。由于不能花太多时间，刚好看到了QQ音乐的按钮的图标，也就顺带弄了下图片。暂时先能播放和换歌，凑合听吧，有空打算把歌词也弄下去。
这个是线上的地址 http://182.254.136.120:99/silas/mp3/demo.html <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: "微软雅黑", 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="上一首"></button>
<button id="btn-player-pause" title="播放"></button>
<button id="btn-next" title="播放"></button>
</div>
<div class="jp-img fd-left">
<img id="jp-pic" class="" src="img/blank.png">
</div>
<div class="jp-interface fd-left">
<div class="tit">
当前歌曲：<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>
这个是 js
window.onload=function(){
//当前播放的歌曲索引
var currentIndex=-1;
// 播放器元素对象
var audio=document.getElementById("aud");
// 歌曲列表
var mlist=["Blank Space.mp3","Lana Del Rey - Young And Beautiful.mp3","Wiz Khalifa - See You Again.mp3"];
// 图片路径
var imglist=["blank.png","Lana Del Rey.jpg","0039Pp2W372JsM.jpg"];
//歌曲路径
var msrc=["Blank Space.mp3","Lana Del Rey - Young And Beautiful.mp3","Wiz Khalifa - See You Again.mp3"];
//进度条
var stick=document.getElementById("stick");
// 图片旋转
var imgRotate = document.getElementById("jp-pic");
//初始化函数
function finit(){
document.getElementById("name").innerHTML=mlist[0];
}
//播放停止按钮
var oPlayOrPause=document.getElementById("btn-player-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="暂停";
imgRotate.className = 'jp-pic';
}else{
audio.pause();
oPlayOrPause.className='';
oPlayOrPause.title="播放";
imgRotate.className = '';
}
}
// 上一曲
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="暂停";
oPlayOrPause.className='btn-play';
}
// 下一曲
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="暂停";
}
//播放进度条
audio.addEventListener('timeupdate',function(){
if (!isNaN(audio.duration)) {
var progressValue = audio.currentTime/audio.duration*200;
stick.style.width = parseInt(progressValue) + 'px';
};
},false);
//歌曲结束时
audio.addEventListener('ended',function(){
stick.style.width=0;
oPlayOrPause.className='';
oPlayOrPause.title="播放";
imgRotate.className = '';
},false);
//判断歌曲是否可以播放
audio.addEventListener('canplay',function(){
var buffer=document.getElementById("buffer");
buffer.style.display="none";
},false);
//监听歌曲是否缓冲
audio.addEventListener('loadstart',function(){
var buffer=document.getElementById("buffer");
buffer.style.display="block";
buffer.innerHTML="正在获取数据...";
},false);
//初始化
finit();
}
（题外话）上班时间玩这个东西就怕被老板抓到，所以我还是特别小心的。由于不能花太多时间，刚好看到了QQ音乐的按钮的图标，也就顺带弄了下图片。暂时先能播放和换歌，凑合听吧，有空打算把歌词也弄下去。
这个是线上的地址 http://182.254.136.120:99/silas/mp3/demo.html <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: "微软雅黑", 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="上一首"></button>
<button id="btn-player-pause" title="播放"></button>
<button id="btn-next" title="播放"></button>
</div>
<div class="jp-img fd-left">
<img id="jp-pic" class="" src="img/blank.png">
</div>
<div class="jp-interface fd-left">
<div class="tit">
当前歌曲：<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>
这个是 js
window.onload=function(){
//当前播放的歌曲索引
var currentIndex=-1;
// 播放器元素对象
var audio=document.getElementById("aud");
// 歌曲列表
var mlist=["Blank Space.mp3","Lana Del Rey - Young And Beautiful.mp3","Wiz Khalifa - See You Again.mp3"];
// 图片路径
var imglist=["blank.png","Lana Del Rey.jpg","0039Pp2W372JsM.jpg"];
//歌曲路径
var msrc=["Blank Space.mp3","Lana Del Rey - Young And Beautiful.mp3","Wiz Khalifa - See You Again.mp3"];
//进度条
var stick=document.getElementById("stick");
// 图片旋转
var imgRotate = document.getElementById("jp-pic");
//初始化函数
function finit(){
document.getElementById("name").innerHTML=mlist[0];
}
//播放停止按钮
var oPlayOrPause=document.getElementById("btn-player-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="暂停";
imgRotate.className = 'jp-pic';
}else{
audio.pause();
oPlayOrPause.className='';
oPlayOrPause.title="播放";
imgRotate.className = '';
}
}
// 上一曲
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="暂停";
oPlayOrPause.className='btn-play';
}
// 下一曲
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="暂停";
}
//播放进度条
audio.addEventListener('timeupdate',function(){
if (!isNaN(audio.duration)) {
var progressValue = audio.currentTime/audio.duration*200;
stick.style.width = parseInt(progressValue) + 'px';
};
},false);
//歌曲结束时
audio.addEventListener('ended',function(){
stick.style.width=0;
oPlayOrPause.className='';
oPlayOrPause.title="播放";
imgRotate.className = '';
},false);
//判断歌曲是否可以播放
audio.addEventListener('canplay',function(){
var buffer=document.getElementById("buffer");
buffer.style.display="none";
},false);
//监听歌曲是否缓冲
audio.addEventListener('loadstart',function(){
var buffer=document.getElementById("buffer");
buffer.style.display="block";
buffer.innerHTML="正在获取数据...";
},false);
//初始化
finit();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- myeclipes忽略js错误，取消验证
- 当鼠标点击页面其他地方时隐藏某个元素
- javascript中的this值
- JS的toFixed方法出错 重写
- 在wordpress上制作一款插件
- 字符串转换成JSON的三种方式
- js处理时间戳
- js
- JS 隔行变色
- 原生js写tab
- javascript图片滑动效果实现
- JS获取年月日时分秒
- ExtJs4 基础必备
- 使用JavaScript打印iframe内容的方法
- Javascript 模块化编程 --RequireJs
- JavaScript中双叹号(!!)作用
- js判断终端加载不同页面
- JavaScript基本概念（下）
- 尝试使用ManifoldJS
- JS页面快捷键库hotkeys.js