论坛首页 → Web前端技术论坛 →

HTML5 audio标签做的网页版播放器(含源码)

浏览 9350 次
锁定老帖子 主题：HTML5 audio标签做的网页版播放器(含源码)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • 蒹葭从风
  • 等级: 初级会员
  • 文章: 11
  • 积分: 40
   发表时间：2012-06-29   最后修改：2012-07-01
最近在学html5的一些知识，就找个东西练练手吧，到最后还是做个播放器出来吧，工作累的时候还能自己听听歌曲！哈哈~
话不多说先上个图片！
html代码 
<!DOCTYPE html >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="index.css">
  <script src="js/jquery-1.7.2.js" type="text/javascript" ></script>
 <script src="js/min_audio.js" type="text/javascript" ></script>
<title>HTML5音乐播放器</title>
</head>

<body>
<audio id="myMusic" > Sorry your browser not support HTML5, use the Firefox or Chrome ,please!</audio>
   <header class="List_title"></header>
   <div id="center">
       <div class="center_tu">
	   <img src="image/tu.jpg"/>
	   </div>
	   <div class="center_title">
		   <div class="txt_content" id="txt_content">
				<P class="Song">旅行的意义</P>
			  	<p class="name">陈琦贞</p>
		   </div>
	      
		   <div class="button">
			   <div class="button_left"></div>
			   <div class="button_start" id="button_start"></div>
			   <div class="button_right"></div>
		   </div>
           <div class="jindu">
              <div class="jindutiao"></div>
			  <div class="jindutiaoed" ></div>
			  <div class="time">00:00&nbsp;|&nbsp;00:00</div>
			  
			  
           </div>
            <div class="yinliang">
				<div class="xiaolaba"></div>
				<div class="voiceCon"></div>
				<div class="voiceConed"></div>
			</div>
	    </div>
   </div>
   <aside class="MusicList">
       <ul class="List" id="List">
          <li class="li_list"><img src="image/莫斯科没有眼泪.gif"/><div class="Single" ><span class="SongName"  KV="莫斯科没有眼泪" au="twins" >01.莫斯科没有眼泪</span> </div></li>
          <HR align=center width=220 color=#51686b SIZE=1>
          <li class="li_list"><img src="image/过得比我好.gif"/><div class="Single" ><span class="SongName"  KV="过得比我好" au="何炅" >02.过得比我好</span> </div></li>
          <HR align=center width=220 color=#51686b SIZE=1>
          <li class="li_list"><img src="image/我爱你.gif"/><div class="Single" ><span class="SongName"  KV="我爱你" au="SHE" >03.我爱你</span> </div></li>
          <HR align=center width=220 color=#51686b SIZE=1>
          <li class="li_list"><img src="image/新贵妃醉酒.gif"/><div class="Single" ><span class="SongName"  KV="新贵妃醉酒" au="李玉刚" >04.新贵妃醉酒</span> </div></li>
          <HR align=center width=220 color=#51686b SIZE=1>
          <li class="li_list"><img src="image/永远的兄弟.gif"/><div class="Single" ><span class="SongName"  KV="永远的兄弟" au="刀郎" >05.永远的兄弟</span> </div></li>
       </ul>
   </aside>
</body>
</html>


js代码 


$().ready(function(){
	//获取音频工具 
    var audio = document.getElementById("myMusic"); 
	
	//开始，暂停按钮
	$("#button_start")._toggle(function(){
		$(this).removeClass("button_start").addClass("button_stop");
		
		if(audio.src == ""){
			var Defaultsong = $(".MusicList .List .Single .SongName").eq(0).attr("KV");
			var Defaultsongauthor = $(".MusicList .List .Single .SongName").eq(0).attr("au");
			var author_tu;
			$("#txt_content .Song").text(Defaultsong);
			$("#txt_content .name").text(Defaultsongauthor);
			$(".MusicList .List .Single .SongName").eq(0).css("color", "#7A8093");
			audio.src = "media/" + Defaultsong + ".mp3";
			author_tu = "image/" + Defaultsong + ".jpg";
			$("#center .center_tu img").attr("src",author_tu);
			author_tu = "image/" + Defaultsong + "-1.gif";
			$("#List .li_list").eq(0).find("img").attr("src",author_tu);
		}
		audio.play();
		TimeSpan();
	},function(){
		$(this).removeClass("button_stop").addClass("button_start");
		audio.pause();
	});
	
	//右前进按钮
	$(".button_right").click(function(){
		$(".MusicList .List .li_list .Single .SongName").each(function(){
			if ($(this).css("color") == "rgb(122, 128, 147)") {
			
                var IsBottom = $(this).parent(".Single").parent(".li_list").next().length == 0 ? true : false;  //检查是否是最尾端的歌曲
                var NextSong;
				var currentSong;
				var nextsongautor;
				var author_tu;
                if (IsBottom) {
                    NextSong = $(".Single").first().children(".SongName").attr("KV");
					nextsongautor = $(".Single").first().children(".SongName").attr("au");
                    $(".Single").first().children(".SongName").css("color", "#7A8093");
					currentSong = $(".Single").first().children(".SongName").attr("KV");
					
					var currentSongPic = "image/" + currentSong + "-1.gif";
					$("#List .li_list").eq(0).find("img").attr("src",currentSongPic);
					
					currentSong = $(".Single").last().children(".SongName").attr("KV");
					currentSongPic = "image/" + currentSong + "-1.gif";
					$(this).parent(".Single").prev().find("img").attr("src",currentSongPic);
                }
                else {
                    NextSong = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("KV");
					nextsongautor = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("au");
                    $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").css("color", "#7A8093");
					currentSong = $(this).attr("KV");
				}
				
				author_tu = "image/" + NextSong + ".jpg";
				$("#center .center_tu img").attr("src",author_tu);
				
                audio.src = "media/" + NextSong + ".mp3";
                $("#txt_content .Song").text(NextSong);
				$("#txt_content .name").text(nextsongautor);
                $(this).css("color", "#fff");
				
				author_tu = "image/" + NextSong + "-1.gif";
				$(this).parent(".Single").parent(".li_list").next().next(".li_list").find("img").attr("src",author_tu);
				
				author_tu = "image/" + currentSong + ".gif";
				$(this).parent().prev().attr("src",author_tu);
                audio.play();
                return false; //代表break
            }
		});
	});
	
	//左前进按钮
	$(".button_left").click(function(){
		$(".MusicList .List .li_list .Single .SongName").each(function () {
			if ($(this).css("color") == "rgb(122, 128, 147)") {
				var IsTop = $(this).parent(".Single").parent(".li_list").prev().prev(".li_list").length == 0 ? true : false;  //检查是否是最顶端的歌曲
				var PrevSong;//上一首歌曲
				var currentSong;
				var presongauthor;
				var author_tu;
                if (IsTop) {
                    PrevSong = $(".Single").last().children(".SongName").attr("KV");
					presongauthor = $(".Single").last().children(".SongName").attr("au");
                    $(".Single").last().children(".SongName").css("color", "#7A8093");
					//获取最后的歌曲
					currentSong = $(".Single").last().children(".SongName").attr("KV");
					//获取最后歌曲的图片
					var currentSongPic = "image/" + currentSong + "-1.gif";
					//把最后一首歌去的图片置成亮色
					$("#List .li_list").last().find("img").attr("src",currentSongPic);
					//获取当前的歌曲
					currentSong = $(".Single").first().children(".SongName").attr("KV");
					//获取当前歌曲的图片
					currentSongPic = "image/" + currentSong + ".gif";
					//把当前的图片置成暗色
					$("#List .li_list").first().find("img").attr("src",currentSongPic);
                }
                else {
                    PrevSong = $(this).parent(".Single").parent(".li_list").prev().prev(".li_list").children(".Single").children(".SongName").attr("KV");
					presongauthor = $(this).parent(".Single").parent(".li_list").prev().prev(".li_list").children(".Single").children(".SongName").attr("au");
                    $(this).parent(".Single").parent(".li_list").prev().prev(".li_list").children(".Single").children(".SongName").css("color", "#7A8093");
					//获取当前图片的名称
					currentSong = $(this).attr("KV");
				}
				author_tu = "image/" + PrevSong + ".jpg";
				$("#center .center_tu img").attr("src",author_tu);
                audio.src = "media/" + PrevSong + ".mp3";
                $("#txt_content .Song").text(PrevSong);
				$("#txt_content .name").text(presongauthor);
				
				//获取上一首歌的图片
				author_tu = "image/" + PrevSong + "-1.gif";
				//把上一首歌的图片变亮
				$(this).parent(".Single").parent(".li_list").prev().prev(".li_list").find("img").attr("src",author_tu);
                //获取当前歌曲的图片
				author_tu = "image/" + currentSong + ".gif";
				//把当前的图片置成暗色
				$(this).parent().prev().attr("src",author_tu);
				$(this).css("color", "#fff");
                audio.play();
                return false; //代表break
			}
		});
	});
	
	
	//监听媒体文件结束的事件（ended），这边一首歌曲结束就读取下一首歌曲，实现播放上的循环播放
	audio.addEventListener('ended', function () {
		$(".MusicList .List .li_list .Single .SongName").each(function(){
			if ($(this).css("color") == "rgb(122, 128, 147)") {
			
                var IsBottom = $(this).parent(".Single").parent(".li_list").next().length == 0 ? true : false;  //检查是否是最尾端的歌曲
                var NextSong;
				var currentSong;
				var nextsongautor;
				var author_tu;
                if (IsBottom) {
                    NextSong = $(".Single").first().children(".SongName").attr("KV");
					nextsongautor = $(".Single").first().children(".SongName").attr("au");
                    $(".Single").first().children(".SongName").css("color", "#7A8093");
					currentSong = $(".Single").first().children(".SongName").attr("KV");
					
					var currentSongPic = "image/" + currentSong + "-1.gif";
					$("#List .li_list").eq(0).find("img").attr("src",currentSongPic);
					
					currentSong = $(".Single").last().children(".SongName").attr("KV");
					currentSongPic = "image/" + currentSong + "-1.gif";
					$(this).parent(".Single").prev().find("img").attr("src",currentSongPic);
                }
                else {
                    NextSong = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("KV");
					nextsongautor = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("au");
                    $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").css("color", "#7A8093");
					currentSong = $(this).attr("KV");
				}
				
				author_tu = "image/" + NextSong + ".jpg";
				$("#center .center_tu img").attr("src",author_tu);
				
                audio.src = "media/" + NextSong + ".mp3";
                $("#txt_content .Song").text(NextSong);
				$("#txt_content .name").text(nextsongautor);
                $(this).css("color", "#fff");
				
				author_tu = "image/" + NextSong + "-1.gif";
				$(this).parent(".Single").parent(".li_list").next().next(".li_list").find("img").attr("src",author_tu);
				
				author_tu = "image/" + currentSong + ".gif";
				$(this).parent().prev().attr("src",author_tu);
                audio.play();
                return false; //代表break
            }
		});
	},false);
	
	
	
	 //歌曲列表的选择操作
	 $(".MusicList .List .Single .SongName").click(function () {
		$(".MusicList .List .Single .SongName").css("color", "#fff");
		$("#button_start").removeClass("button_start").addClass("button_stop");
		$(this).css("color", "#7A8093");
        var SongName = $(this).attr("KV");
		var songnameauthor = $(this).attr("au");
		$("#txt_content .Song").text(SongName);
		$("#txt_content .name").text(songnameauthor);
		var currentSongPic = "image/" + SongName + ".jpg";
		$("#center .center_tu img").attr("src",currentSongPic);
		
		currentSongPic = "image/" + SongName + "-1.gif";
		$(this).parent().parent().find("img").attr("src",currentSongPic);
		audio.src = "media/" + SongName + ".mp3";
        audio.play();
        TimeSpan();
	 });
	 
	 //音频进度条(增加)
	 $(".jindutiao").click(function(e){
		var Process = $(".jindutiao").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $(".jindutiao").width();

        var CurrentProces = e.clientX - ProcessStart;
        DurationProcessRange(CurrentProces / ProcessLength);
		$(".jindutiaoed").css("width", CurrentProces);
	 
	 });
	 
	 //音频进度条事件（进度减少）
	 $(".jindutiaoed").click(function(e){
		//播放进度条的基准参数
        var Process = $(".jindutiao").offset();
        var ProcessStart = Process.left;
        var ProcessLength = $(".jindutiao").width();

        var CurrentProces = e.clientX - ProcessStart;
        DurationProcessRange(CurrentProces / ProcessLength);
        $(".jindutiaoed").css("width", CurrentProces);
	 
	 });
	 
	 //音量进度条事件（进度增加）
	 $(".voiceCon").click(function(e){
		var Process = $(".voiceCon").offset();
		var ProcessStart = Process.left;
		var ProcessLength = $(".voiceCon").width();
		
		var CurrentVoice = e.clientX - ProcessStart;
		VolumeProcessRange(CurrentVoice /ProcessLength );
		$(".voiceConed").css("width",CurrentVoice);
	 });
	 
	 //音量进度条事件(进度减少)
	 $(".voiceConed").click(function(e){
		var VoidProcess = $(".voiceCon").offset();
        var VoidProcessStart = VoidProcess.left;
        var VoidProcessLength = $(".voiceCon").width();

        var CurrentProces = e.clientX - VoidProcessStart;
        VolumeProcessRange(CurrentProces / VoidProcessLength);
        $(".voiceConed").css("width", CurrentProces);
	 });
	 
	 //静音事件
	 $(".xiaolaba")._toggle(function(){
		var  bg_jingyin = "image/jingyin.png";
		$(this).css("background","url("+bg_jingyin+")");
		$(".voiceConed").css("width", "0");
		audio.volume = 0;
	 },function(){
		var bg_zuida = "image/yinliang.png";
		$(this).css("background","url("+bg_zuida+")");
		$(".voiceConed").css("width", "55");
		audio.volume = 1;
	 });
	 
	 
	 //列表显示
	 $(".List_title")._toggle(function(){
		$(".MusicList").hide();
	 },function(){
		$(".MusicList").show();
	 })

});


css代码 

*{ margin:0;
   padding:0;}
img{border:0}
body{margin:0 auto 0 auto; background:url(image/bg.jpg); text-align:left}
header{background:url(image/lb.png) no-repeat; margin-left:1100px; margin-top:63px; width:69px; height:22px; cursor: pointer;}
#center{background:url(image/zx.png); width:692px; height:335px; margin-top:100px; margin-left:300px; float:left}
aside{background:url(image/left_bg.png); width:250px; height:626px; float:left; margin-top:0px; margin-left:20px}
.center_tu{padding-top:48px; padding-left:71px; float:left; width:238px}
.center_title{float:right; font-size:24px; font-family:"微软雅黑"; color:#FFFFFF; width:370px}
.center_title .name{padding-left:80px; margin-top:0px}
.center_title p{margin-top:100px; margin-left:50px}
.button{width:107px; text-align:left; margin-top:60px}
.button_left{background:url(image/button1.png); width:31px; height:49px; float:left}
.button_start{background:url(image/button2.png); width:46px; height:49px; float:left}

.button_stop{background:url(image/button4.png); width:46px; height:49px; float:left}
.button_right{background:url(image/button3.png); width:30px; height:49px; float:right}
.jindu{width:180px; height:8px; margin-left:115px; float:left; margin-top:-30px; text-align:left; z-index:10;}
.jindutiao{width:180px; height:2px; margin-left:1px;background-color:#000; cursor: pointer; }
.jindutiaoed{width: 0px; position:relative; height: 2px; margin-top:-2px; cursor: pointer; background-color:#ae4a1e; }

.time{font-size:12px; color:#495259; float:right;}
.yinliang{float:right;  height:14px; width:100px; margin-top:-7px;position:relative; margin-right:55px;}
.yinliang .xiaolaba {background:url(image/yinliang.png) no-repeat; width:19px; height:14px; clear:left; float:left;}
.voiceCon{width:55px; height:2px; background-color:#000; clear:right; float:left; margin-left:2px; margin-top:6px; cursor: pointer;}
.voiceConed{height:2px; background-color:#ae4a1e;position:absolute; margin-top:6px; margin-left:21px; cursor: pointer; width:10px;}
/*
.time{margin-left:210px; float:left; margin-top:-120px}
*/

ul{list-style:none; margin-left:10px; margin-top:10px;}
ul li{padding-top:20px}
.SongName{float:right; color:#dedede; font-size:16px; font-family:"微软雅黑"; width:154px; margin-top:25px; text-align:left}
.Single{float:right; text-align:left; width:154px;  position:relative; vertical-align:middle;}
.SongName{cursor: pointer; position:relative; height:76px;}




提示一下，这个media文件夹下的音乐文件被我删了，如果测试的话，要把下面图片上的歌曲，拷到media文件夹下，不允许有任何不一致的啊~

还有一定要用chrome浏览器打开，或者用chrome浏览器内核的浏览器打开。火狐不支持。MP3格式的音乐，所以要用chrome打开哈~~
  • 大小: 1.3 MB
  • 大小: 22.4 KB
返回顶楼
         
  • fantao005x
  • 等级: 初级会员
  • 性别:
  • 文章: 8
  • 积分: 30
  • 来自: 深圳
   发表时间：2012-07-02  
万恶的.rar文件！ ubuntu 解压不了。悲剧
返回顶楼
          回帖地址
0 请登录后投票
  • beyond222
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 40
  • 来自: 成都
   发表时间：2012-07-02  
不错 哦··楼主 先顶了 有时间了学习一下
返回顶楼
          回帖地址
0 请登录后投票
  • blacksheepW
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 30
  • 来自: 杭州
   发表时间：2012-07-10  
NextSong = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("KV");
                    nextsongautor = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("au");

这种代码，无力吐槽了……
返回顶楼
          回帖地址
0 请登录后投票
  • 蒹葭从风
  • 等级: 初级会员
  • 文章: 11
  • 积分: 40
   发表时间：2012-07-10  
blacksheepW 写道
NextSong = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("KV");
                    nextsongautor = $(this).parent(".Single").parent(".li_list").next().next(".li_list").children(".Single").children(".SongName").attr("au");

这种代码，无力吐槽了……



哈哈哈~~~本来这个就不好选择啊
返回顶楼
          回帖地址
0 请登录后投票
  • 蒹葭从风
  • 等级: 初级会员
  • 文章: 11
  • 积分: 40
   发表时间：2012-07-10  
fantao005x 写道
万恶的.rar文件！ ubuntu 解压不了。悲剧


在Windows下解压之后再拷到小兔兔下运行
返回顶楼
          回帖地址
0 请登录后投票
  • HelloCR
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
   发表时间：2012-07-11  
最近正在学习html5,先看看
返回顶楼
          回帖地址
0 请登录后投票
  • 凌晨一点
  • 等级: 初级会员
  • 性别:
  • 文章: 1
  • 积分: 30
  • 来自: 广州
   发表时间：2012-12-23  
不知怎么会事的，在播放时按暂停，要点俩下才有反应的
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics