Html5 音频播放器实例

最近一直在看Html5高级程序设计，其中有两个很炫的元素audio 和video，可以制作一些效果很不错的应用。

由于是一枚技术小白，于是在网上搜集资料，起码能实现一款自定义的音频播放器吧。

根据网上的实例进行了代码的重写，虽然只是修改那么的一丝，但是对于html5 audio 元素的使用还是加深了理解的。

===================================================================================

媒体元素的只读特性：

可用脚本控制的特性值

===============================================================================

相关代码：

Html Content:

Start Music00:00 | 00:00       01.因为爱情  02.情歌 

CSS样式

/**Musicbox css *by bigboy*2014-2-11	
*/.MusicBox{font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;background-color: #212121; /*设置线性渐变*/   background-image: -webkit-gradient(linear,left top,left bottom,from(#1b1b1b),to(#212121));background-image: -webkit-linear-gradient(top,#1b1b1b,#212121);background-image: -moz-linear-gradient(top,#1b1b1b,#212121);background-image: -ms-linear-gradient(top,#1b1b1b,#212121);background-image: -o-linear-gradient(top,#1b1b1b,#212121);background-image: linear-gradient(top,#1b1b1b,#212121);/*设置边框圆角*/border-radius: 3px;-moz-border-radius:3px;-webkit-border-radius:3px;/*设置阴影*/text-shadow：0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:10px 10px 25px #ccc;-moz-box-shadow:10px 10px 25px #ccc;box-shadow: 10px 10px 25px #ccc;/*设置透明度*/opacity: 0.9;/*基本属性*/border-width: 1px;border-style: solid;border-color: #488BF0 #488BF0 #488BF0 #488BF0; width: 820px;height: 40px;padding: 2px 5px;position: absolute;z-index: 9px;
}/*上一媒体控制图标*/
.LeftControl{background:url(../Images/sk-dark.png) left 2px no-repeat;height: 20px;margin-right: 8px;margin-left: 10px;padding: 10px;width: 0px;float: left;
}
.LeftControl:hover{background:url(../Images/sk-dark.png) left -30px no-repeat; }
/*下一媒體控制圖標*/.RightControl{background:url(../Images/sk-dark.png) left -62px no-repeat;padding: 10px;height: 20px;width: 0px;margin-right: 8px;margin-left: 10px;float: left;}.RightControl:hover{background:url(../Images/sk-dark.png) left -93px no-repeat;}/*播放、停止控制图标*/
.MainControl{background:url(../Images/sk-dark.png) -80px -130px no-repeat;  width: 25px;height: 20px;float: left;padding: 10px 15px 5px 10px; 
}
.MainControl:hover{background:url(../Images/sk-dark.png) -80px -166px no-repeat;	
}/*呈现出暂停或停止图标*/.StopControl{width:14px;padding: 10px 10px 5px 10px;float:left; height:20px;background:url(../Images/sk-dark.png) -50px -130px no-repeat; margin-right:16px;   }
.StopControl:hover{background:url(../Images/sk-dark.png) -50px -165px no-repeat;}/*音频进度控制*/
.ProcessControl{width: 500px;padding: 5px 10px 10px 10px;float: left;height: 20px;color: #fff;margin-right: 12px;
}.ProcessControl .SongName{ float: left;}
.ProcessControl .SongTime{ float: right;} .ProcessControl .Process{width: 500px;float: left;height: 2px;cursor: pointer;background-color: #000;margin-top: 7px;
}.ProcessControl .ProcessYet{width: 100px;position: absolute;height: 2px;left: 140px;top: 30px;cursor: pointer;background-color: #7a8093; 
}/*静音图标*/
.VoiceEmp{width: 0px;padding: 10px;float: left;height: 17px;background:url(../Images/sk-dark.png) -28px -180px no-repeat;  margin-right:2px; 
}
.VoiceEmp:hover{background:url(../Images/sk-dark.png) -28px -212px no-repeat; 
}/*总音量进度条*/
.VoiceProcess{width: 66px;height: 2px;cursor:pointer;background-color: #000;float: left;margin-top: 19px;margin-right: 6px;}/*当前音量进度条*/
.VoiceProcessYet{width: 0px;height: 2px;position: absolute;left: 685px;top: 21px;cursor: pointer;background-color: #7a8093;}/*全音量图标*/
.VoiceFull{background:url(../Images/sk-dark.png) -28px -116px no-repeat; width: 0px;height: 17px;padding: 10px;float: left;
}
.VoiceFull:hover{background:url(../Images/sk-dark.png) -28px -148px no-repeat;
}/*显示多媒体文件列表的控制图标*/.ShowMusicList{        width:10px;padding: 10px 10px 5px 10px;float:left; height:10px;background:url(../Images/sk-dark.png) -20px 0 no-repeat; margin:5px 0 0 12px;cursor:pointer;
}.ShowMusicList:hover{        background:url(../Images/sk-dark.png) -20px -29px no-repeat; }/*播放列表*/
.MusicList {font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;background-color: #212121;background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121));background-image: -webkit-linear-gradient(top, #1B1B1B, #212121);background-image: -moz-linear-gradient(top, #1B1B1B, #212121);background-image: -ms-linear-gradient(top, #1B1B1B, #212121);background-image: -o-linear-gradient(top, #1B1B1B, #212121);background-image: linear-gradient(top, #1B1B1B, #212121);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;text-shadow: 0 1px 0 rgba(255,255,255,0.5);border-width: 1px;border-style: solid;border-color: #488BF0 #488BF0 #488BF0 #488BF0;width:600px;height:200px;/*阴影*/-webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; /*透明度*/opacity:0.9; /*基本性质*/padding:2px 5px;position:absolute;z-index:1000;top: 50px;left: 103px;display:none;}.MusicList .Author {font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;background-color: #212121;background-image:url(../Images/Eson.jpg);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;width:158px;height:200px;float:left;}.MusicList .List{font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;background-color: #212121;    -moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;width:410px;height:180px;float:right;overflow:hidden;padding:10px 13px;color:#fff;       }.MusicList .List .Single{width:100%;float:left;overflow:hidden;height:15px;font-size:13px;cursor:pointer;margin-bottom:8px;}.MusicList .List .Single .SongName{width:90%;float:left;}

源码下载：

http://download.csdn.net/detail/monarch_lin/6921699

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！