`
蒹葭从风
  • 浏览: 5053 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

audio标签做的网页版播放器

HTML5 
阅读更多
最近在学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;}
  • 大小: 1.3 MB
  • 大小: 22.4 KB
分享到：
| 相同url的ajax请求IE缓存问题
评论
3 楼 yuruei2000 2012-07-13  
很棒！ 值得学习！  请问楼主QQ多少 方便告知吗，一起交流
2 楼 蒹葭从风 2012-07-01  
29120406 写道
貌似没有看到歌曲的路径啊。怎么设置文件路径

29120406 写道
貌似没有看到歌曲的路径啊。怎么设置文件路径

audio.src = "media/" + Defaultsong + ".mp3";
这个啦，用js控制歌曲路径的
1 楼 29120406 2012-06-30  
貌似没有看到歌曲的路径啊。怎么设置文件路径
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    audio.js网页音乐播放器插件代码

    audio.js 是一款轻量级的网页音乐播放器插件，专为在网页上嵌入音频播放功能而设计。它提供了一种优雅的方式来控制和展示MP3文件，使得开发者无需依赖复杂的多媒体库就能实现音乐播放功能。这个插件的代码结构简单，...

    利用HTML5的Audio标签实现音乐播放器

    HTML5的Audio标签是网页开发中的一个重要组成部分，它使得在网页上嵌入音频内容变得简单易行，无需依赖外部插件。在这个应用中，我们利用HTML5的Audio标签结合JQuery库来创建一个音乐播放器，这是一个典型的前端开发...

    千千静听-网页版播放器代码

    HTML5的Audio API是现代网页播放器的基础，它提供了创建、控制和播放音频的能力。例如，通过`&lt;audio&gt;`标签，我们可以插入音频文件，并使用`src`属性指定音频源。同时，Audio API还提供了如`play()`、`pause()`、`...

    html5 audiojs控制音乐播放器开关声音_网页音乐播放器

    您的浏览器不支持audio标签。 &lt;/audio&gt; ``` 这个例子中，`&lt;audio&gt;`标签定义了一个音频元素，`id`属性用于唯一标识该元素，`src`属性指定了音频文件的路径。内联的`&lt;p&gt;`标签提供了一段备用文本，当用户的浏览器不...

    28款网页播放器-网页版播放器

    以上这些知识点都是围绕"28款网页播放器-网页版播放器"这一主题的核心技术与特性。这些播放器各具特色，满足了不同需求，从基本的媒体播放到复杂的互动功能，展现了网页播放器的多样性与灵活性。通过了解这些知识点...

    基于html5的网页音乐播放器

    总结，基于HTML5的网页音乐播放器利用`&lt;audio&gt;`标签和JavaScript API，实现了在网页中流畅播放音频的功能。开发者可以根据需求扩展其功能，创建具有播放列表、音量控制、进度条等高级特性的音乐播放器。对于想要涉足...

    十四款网页音乐播放器源码下载

    网页音乐播放器是网站上用于播放音频文件的重要组件，它为用户提供友好的界面和便捷的操作方式，使得在线听音乐变得更加方便。本资源提供十四款不同的网页音乐播放器源码，对于学习和理解网页音乐播放器的实现原理...

    js播放器 web播放器 网页播放器

    1. HTML5 Audio API：这是构建js播放器的基础，HTML5引入了`&lt;audio&gt;`标签，支持直接在网页中嵌入音频文件。JavaScript可以与这个标签进行交互，通过其提供的API来控制音频的播放。例如，`audioElement.play()`用于...

    网页版音频播放器audioplayer

    网页版音频播放器 Audioplayer 是一个专为网页设计的音频播放解决方案，它支持多种音频格式，包括MP3、Ogg和WAV等。这些格式在网页音频应用中非常常见，因为它们具有良好的兼容性和音质。 MP3（MPEG-1 Audio Layer ...

    迷你网页音乐播放器代码htm

    学习和使用这些网页音乐播放器代码，可以加深对HTML5多媒体元素的理解，尤其是`&lt;audio&gt;`标签的使用，同时也能提升JavaScript编程技巧，包括事件监听、DOM操作等。对于网页开发者来说，掌握这类技术可以为网站增添更...

    网页音乐播放器HTML

    这些元素通过特定的HTML标签如`&lt;audio&gt;`进行定义，`&lt;audio&gt;`标签允许在网页中嵌入音频内容。 接着，CSS（层叠样式表）用于美化和布局这些HTML元素。在"player.html"中可能包含了内联CSS或者链接到外部CSS文件，用以...

    基于HTML5的audio 音乐播放器.zip

    1. HTML5 Audio元素：HTML5引入了`&lt;audio&gt;`标签，使得在网页中内嵌音频内容变得非常简单。`&lt;audio&gt;`元素允许我们直接在网页中播放音频文件，无需借助Flash或其他插件。基本结构如下： ```html &lt;audio controls&gt; ...

    HTML-网页音乐播放器-源码

    HTML网页音乐播放器是一种在网页上实现音频播放功能的技术，主要依赖于HTML5中的`&lt;audio&gt;`标签。这款基于原生HTML和JavaScript的音乐播放器是大学生进行期末课程设计的一个优秀实践项目，对于学习Web开发的学生来说...

    网页音乐播放器 html5 实验报告 附代码

    这个实验的第一步就是创建一个HTML页面，使用`&lt;audio&gt;`标签来定义音乐播放器的基础结构。`&lt;audio&gt;`标签的基本语法如下： ```html &lt;audio id="myAudio" src="music.mp3"&gt; Your browser does not support the audio ...

    html5带背景半透明mp3网页音乐播放器

    本项目“html5带背景半透明mp3网页音乐播放器”正是利用了HTML5的这一特性，创建了一个具有半透明背景和良好用户体验的音乐播放器，主要针对MP3格式的音频文件。 首先，我们需要了解HTML5的`&lt;audio&gt;`标签。这个标签...

    HTML5中的audio标签概述案例.pdf

    《HTML5中的audio标签详解及案例分析》 HTML5作为现代网页开发的重要标准，极大地丰富了网页的多媒体体验。其中，`&lt;audio&gt;`标签是HTML5引入的一个核心特性，用于在网页中嵌入音频内容，使得开发者能够轻松地实现...

    HTML网页歌曲播放器 歌词同步

    - 对于其他现代浏览器，建议使用HTML5 `&lt;audio&gt;`标签或第三方JavaScript库（如Howler.js）来构建更兼容的播放器。 4. **用户体验优化**： - 除了基本的播放功能外，还可以增加音量调节、播放进度条等功能，提升...

    网页视频播放器，能够播放mp3等文件

    2. **HTML5支持**：现代网页播放器通常支持HTML5 `&lt;video&gt;` 和 `&lt;audio&gt;` 标签，这使得它们可以跨平台工作，并且在没有Flash的情况下也能播放视频。 3. **用户界面**：播放器应提供控制元素，如播放/暂停按钮、音量...

    网页版-音乐播放器，可以下来玩玩

    网页版音乐播放器是一种在网页上实现音频播放功能的应用，主要通过HTML、CSS和JavaScript等前端技术构建。这种播放器通常包含用户界面元素，如播放、暂停、前进、后退按钮，以及音量控制和进度条，使得用户能够在...

    html5的audio播放器

    它利用了HTML5标准中的`&lt;audio&gt;`标签，极大地增强了网页对音频文件的处理能力，使得开发者无需依赖Flash等外部插件即可实现音频播放功能。这个"bang-audio-master"压缩包很可能包含了实现一个自定义HTML5 Audio...

Magicbox
Global site tag (gtag.js) - Google Analytics