cccylove

死生契阔,与子成说。执子之手,与子偕老

HTML5 AUDIO元素 JS 音乐播放器 CSS3修饰

cc2012-09-08 22:47:00

 

 

播放核心采用HTML5中新元素<AUDIO> ,用JS控件音乐播放, CSS3修饰外观。没有用一张图片的音乐播放器。呵呵。练习之作,难免bug很多,见谅。

 

HTML页面代码:播放核心【HTML5MusicPlayer.html】

------------------------------------------------------------------------------------------

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>MusicPlayer</title>

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

<script src="ctrl.js" type="text/javascript"></script>

</head>

<body>

<div id="musicFrame">

<h3><em id="musicTihsTime">00:00</em><a href="javascript:alert('暂不支持下载')" id="musicName">无歌手-无曲目</a></h3>

<div id="fullTime">

<div id="fullTimeBar">

<div id="fullTimeRun"></div>

</div>

<em id="changeTime"></em>

<div id="fullTimeValue">00:00</div>

</div>

<div id="musicCtrl">

<ul>

<li id="musicUp"><a href="">《&nbsp;&nbsp;</a></li>

<li id="musicPlay"><a href="">播放</a></li>

<li id="musicStop"><a href="">停止</a></li>

<li id="musicDown"><a href="">&nbsp;&nbsp;》</a></li>

</ul>

<div id="vol">

<div id="volValue">50%</div>

<div id="volBar">

<div id="volRun"></div>

</div>

<em id="changeVol"></em>

</div>

</div>

<ul id="musicList">

<li><span>金泫雅-哥哥你是我的Sytle</span><em>http://cccylove.com/MUSIC/Beautiful Girls.mp3</em></li>

<li><span>李小杰-朋友的酒</span><em>http://cccylove.com/MUSIC/Beautiful Girls.mp3</em></li>

<li><span>凤凰网-最炫民族风</span><em>http://cccylove.com/MUSIC/Beautiful Girls.mp3</em></li>

<li><span>张宇-雨一直下</span><em>http://cccylove.com/MUSIC/Girl friend.mp3</em></li>

<li><span>刘欢-好人一生平安</span><em>http://cccylove.com/MUSIC/pydj1.ogg</em></li>

<li><span>小东-春暖花开</span><em>http://cccylove.com/MUSIC/Beautiful Girls.mp3</em></li>

</ul>

<p id="copyRight">HTML5 MusicPlayer By Lenton V0.1</p>

<audio id="musicPlayer" autobuffer>

<source id="musicSrc" src="http://cccylove.com/MUSIC/Girl friend.mp3">

<p>请更换支持HTML5的浏览器</p>

</audio>

</div>

</body>

</html>

 
JS文件代码,控件核心  【ctrl.js】

 

------------------------------------------------------------------------------------------

 

/*

 

HTML5 Audio core Music Player by Lenton V0.1

 

*/

window.onload = function(){//JS开始执行

getMusicDOM();

listenerTeam();

musicPlayer.volume = 0.5;

changeMusic();

}

 

var musicPlayer,musicPlay,musicStop,musicUp,musicDown;

var musicTime,musicThisTime,musicVol,musicThisVol,musicName;

var timeRun,volRun,changeTime,changeVol;

var infoThisVol,infoThisTime,infoTime,infoName;

var musicSrc;

 

var hover = false;

 

function getMusicDOM(){//获取DOM对像

////html5 audio core

musicPlayer = document.getElementById("musicPlayer");

 

////ctrl

musicPlay = document.getElementById("musicPlay");

musicStop = document.getElementById("musicStop");

musicUp = document.getElementById("musicUp");

musicDown = document.getElementById("musicDown");

 

////ctrlBar and button

timeRun = document.getElementById("fullTimeRun");

volRun = document.getElementById("volRun");

volBar = document.getElementById("volBar");

changeTime = document.getElementById("changeTime");

changeVol = document.getElementById("changeVol");

timeBar = document.getElementById("fullTimeBar");

 

////audio info

musicTime = document.getElementById("fullTimeValue");

musicThisTime = document.getElementById("musicTihsTime");

musicVol = document.getElementById("volValue");

//musicThisVol = document.getElementById("volRun");

musicName = document.getElementById("musicName");

 

musicList = document.getElementById("musicList");

musicSrc = document.getElementById("musicSrc");

}

 

 

function getMusicName(str){//将URL中的文件名取出,做音乐名

var tmp = str.substring(str.lastIndexOf("/") + 1);

return tmp;

}

 

 

function listenerTeam(){//所有事件监听器集合

musicPlay.onclick = function(){//播放,暂停

if (musicPlayer.paused) {

musicPlayer.play();

setMusicInfo();

setThisTime();

musicPlay.innerHTML = "<a href=''>暂停</a>";

}else{

musicPlayer.pause();

musicPlay.innerHTML = "<a href=''>播放</a>";

}

return false;

}

musicStop.onclick = function(){//停止

musicPlayer.pause();

musicPlayer.currentTime = 0;

clearMusicInfo();

return false;

}

timeBar.onclick = function(e){//时间轴

var evt = e||event;

var fullTimes = musicPlayer.duration;

musicPlayer.currentTime = parseInt(evt.layerX / 345 * fullTimes);

timeRun.style.width = evt.layerX + "px";

changeTime.style.left = evt.layerX - 3 + "px";

musicThisTime.innerHTML = formatTime(parseInt(musicPlayer.currentTime)); 

}

volBar.onclick = function(e){//音量轴

var evt = e||event;

musicPlayer.volume = evt.layerX/50 * 1;

volRun.style.width = evt.layerX + "px";

changeVol.style.left = evt.layerX - 3 + "px";

musicVol.innerHTML = parseInt(musicPlayer.volume *100 ) + "%"

}

changeTime.onmousedown = function(){

hover = true;

draging();

}

changeTime.onmouseup = function() {

hover = false;

draging1();

}

}

 

function setMusicInfo(){//设置音乐相关信息

musicName.innerHTML = getMusicName(musicPlayer.currentSrc);

musicTime.innerHTML = formatTime(parseInt(musicPlayer.duration));

}

 

function setThisTime(){//设置时间显示与时间条

musicThisTime.innerHTML = formatTime(parseInt(musicPlayer.currentTime)); 

timeRun.style.width = parseInt(musicPlayer.currentTime / musicPlayer.duration * 345) + "px";

changeTime.style.left = parseInt(musicPlayer.currentTime / musicPlayer.duration * 345) - 3 + "px";

if (musicPlayer.ended){

clearMusicInfo();

musicPlay.innerHTML = "<a href=''>播放</a>";

return;

}else if(musicPlayer.paused) return;

setTimeout(function(){setThisTime()},100);

//console.log("aa->>");

}

 

function clearMusicInfo(){//清除音乐信息

musicPlayer.currentTime = 0;

musicPlayer.pause();

timeRun.style.width = 0 + "px";

changeTime.style.left = 0 - 3 + "px";

musicThisTime.innerHTML = "00:00";

}

 

function formatTime(time){//时间分解为时,分,秒

var s = 0;

var m = 0;

var h = 0;

if(!time) return "wait...";

h = parseInt(time / 3600);

m = parseInt(time % 3600 / 60);

s = parseInt(time % 3600 % 60);

if (h == 0) {

return formaTimeStr(m) + ":" + formaTimeStr(s);

}else return formaTimeStr(h) + ":" + formaTimeStr(m) + ":" + formaTimeStr(s);

}

 

function formaTimeStr(time){//用新格式组合

if (time == 0) return "00";

else if(time < 10) return "0" + time;

else return time;

}

 

//拖动实现

function draging(){

timeBar.onmousemove = function(e){

if(!hover) {

return;

}

var evt = e || event;

var fullTimes = musicPlayer.duration;

musicPlayer.currentTime = parseInt(evt.layerX / 345 * fullTimes);

timeRun.style.width = evt.layerX + "px";

changeTime.style.left = evt.layerX - 3 + "px";

musicThisTime.innerHTML = formatTime(parseInt(musicPlayer.currentTime)); 

 

//console.log(evt.layerX + "hover  " + hover);

}

}

 

function draging1(){

hover = false;

}

 

function changeMusic(){

var musicList = document.getElementById("musicList").getElementsByTagName("li");

 

for(var i = 0; i < musicList.length; i++){

musicList[i].ondblclick = function(){

//musicPlayer.pause();

var tmp = "";

var tmp2 = "";

tmp = this.getElementsByTagName("span");

tmp2 = this.getElementsByTagName("em");

musicPlayer.src = tmp2[0].innerHTML;

musicSrc.src = tmp2[0].innerHTML;

musicName.innerHTML = tmp[0].innerHTML;

musicPlayer.load();

musicPlayer.play();

setMusicInfo();

setThisTime();

console.log(musicPlayer.duration);

}

}

 

}

 

 

 

 

CSS文件代码,外观核心  【style.css】

 

------------------------------------------------------------------------------------------

 

/*

 

HTML5 Audio core Music Player by Lenton V0.1

 

*/

body,ul,p{

margin: 0;

padding: 0;

}

#musicFrame{

width:430px;

margin: 50px auto;

border:1px solid #d4d4d4;

border-radius:5px;

box-shadow:2px 2px 3px #EEE,0 -10px 200px #f1f1f1 inset;

font-size: 12px;

}

#musicFrame h3{

height:55px;

margin: 10px;

background-color: #FFF;

border-radius:5px 5px 0 0;

border:1px solid #d4d4d4;

box-shadow:2px 2px 3px #f5f5f5 inset;

font: 12px/55px "宋体","Lucida Grande", "Trebuchet MS", Verdana, sans-serif;

}

#musicFrame #musicName{

color: #494949;

text-decoration:none;

}

#musicFrame #musicName:hover{

color: #00c6ff;

}

#musicFrame h3 em{

font: 24px/55px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;

color: #494949;

display: inline-block;

height:55px;

width:120px;

padding: 0px 10px;

}

#fullTime{

margin: 0 10px;

position: relative;

}

#fullTimeBar,#fullTimeValue{

height:12px;

display: inline-block;

line-height:12px;

}

#fullTimeBar{

margin:2px 0;

height:6px;

border: 1px solid #9e9e9e;

border-radius:4px;

width:345px;

background-color: #8e8e8e;

box-shadow:2px 2px 2px #787878 inset;

}

#fullTimeRun{

height:6px;

border-radius:4px;

background-color: #FFF;

box-shadow:2px 2px 2px #ededed inset;

width:0px;

}

#fullTimeValue{

text-align:right;

width:50px;

vertical-align: top;

}

#changeTime{

position:absolute;

height:10px;

width:6px;

display: block;

background-color: #DDD;

top:0;

left:0px;

border: 1px solid #808080;

border-radius:2px;

}

#musicCtrl{

border-bottom: 1px solid #dbdbdb;

border-top: 1px solid #f0f0f0;

box-shadow:0px 25px 15px #FFF inset,0 -25px 15px #FFF inset;

 

margin-top: 8px;

padding:10px;

background-color: #f8f8f8;

}

#musicCtrl ul{ display: inline-block;

}

#musicCtrl li{

display:inline-block;

-height:27px;

-width:27px;

border-radius:3px;

background-color: #333;

box-shadow: 0 0 1px #fff, 0 0 3px #CCC, 

0 0 3px #CCC, inset 0 1px #fff, 

inset 0 12px rgba(255,255,255,0.15), 

inset 0 4px 10px #333, inset 0 22px 5px #333,

inset 0 -5px 10px #333;

padding: 5px 10px;

}

#musicCtrl li:hover{

background-color: #666;

cursor:pointer;

box-shadow: 0 0 1px #00c6ff, 0 0 3px #CCC, 

0 0 3px #CCC, inset 0 1px #00c6ff, 

inset 0 12px rgba(255,255,255,0.15), 

inset 0 4px 10px #333, inset 0 22px 5px #333,

inset 0 -5px 10px #333;

}

#musicCtrl li:hover a{

color: #00c6ff;

}

#musicCtrl li:active a{

  color: #333;

  text-shadow:1px 1px 0px #FFF;

}

#musicCtrl li a:active{

  color: #333;

  text-shadow:1px 1px 0px #FFF;

}

#musicCtrl a{

color: #FFF;

text-decoration:none;

font-family: Arial, "MS Trebuchet", sans-serif;

}

#vol{

position: relative;

display:inline-block;

width:100px;

margin-left: 105px;

}

#volBar{

margin:2px 0;

height:6px;

border: 1px solid #9e9e9e;

border-radius:4px;

width:50px;

background-color: #8e8e8e;

box-shadow:2px 2px 2px #787878 inset;

}

#volRun{

height:6px;

border-radius:4px;

background-color: #FFF;

box-shadow:2px 2px 2px #ededed inset;

width:25px;

}

#changeVol{

position:absolute;

height:10px;

width:6px;

display: block;

background-color: #DDD;

top:0;

left:25px;

border: 1px solid #808080;

border-radius:2px;

}

#volValue{

text-align:right;

vertical-align: top;

position: absolute;

right:0;

top:0;

}

#changeTime:hover,#changeVol:hover{

background-color: #00c6ff;

cursor: pointer;

box-shadow:0px 1px 3px #333;

}

#musicList{

margin:10px;

padding: 10px;

background-color: #FFF;

box-shadow:inset 2px 2px 2px #EEE;

height:200px;

overflow-y: scroll;

overflow-x:hidden;

}

#musicList li{

list-style:decimal;

list-style-position:inside;

border-bottom: 1px solid #DDD;

padding: 5px 0px;

cursor: default;

}

#musicList li:hover{

background-color: #CCC;

color:#FFF;

padding-left:10px;

}

#musicList em{ display:none;}

#copyRight{

margin: 5px 0px;

text-align: center;

color: #999;

}

 

 

最后实例下载【请使用chrome最新版浏览器测试,因为chrome支持mp3,FireFox需要将音乐换成.ogg格式,IE9以下不支持HTML5】

------------------------------------------------------------------------------------------

 

 

 

下载链接 :201209081454542305.rar

感谢阅读!发表下看法?

留言


蓝瞳视觉|网格传媒/zblog主题|西西用户体验设计|Zblog