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

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网页音乐播放器插件代码

    这是一款实用的代码十分简洁的网页MP3播放器代码，audio.js网页音乐播放器插件下载。

    MP3播放器1.3之HTML5AUDIO

    MP3播放器1.3-基于HTML5AUDIO标签的本地播放器 1.播放本地歌曲,模式包括单曲播放/单曲循环播放/顺序播放/顺序循环播放 2.自主选择文件和删除文件,自由切换上一首/下一首,随时暂停/播放 3.显示正在播放歌曲和剩余...

    HTML5环形音乐播放器

    &lt;audio&gt; 标签的推出使您不再需要外部音乐播放器，在网站上实现真正的声音融合。 随着 HTML5 的出现，发生了一些重大变化，特别是在音乐和音频方面。开发人员不再要求 web 冲浪者使用 Adobe Flash、Apple QuickTime ...

    JS+html5制作简单音乐播放器

    本教程为大家分享了JS音乐播放器的具体代码，供大家参考，具体内容如下 1.HTML &lt;audio&gt; 标签定义声音，比如音乐或其他音频流。其主要属性有src:要播放的音频的 URL,controls:如果出现该属性，则向用户显示...

    HTML5视频播放标签video和音频播放标签audio标签的正确用法

    HTML5里引入的新标记 &lt;audio&gt; 和 &lt;video&gt; 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中

    jplayer_2.9.2_demo

    jq音频播放器插件，自定义audio标签样式，打造自己的网页音乐播放器

    使用FragmeTabHost创建标签页

    注意在AndroidManifest.xml中设置拨号权限，播放视频启用自带播放器，通过传入一个Action为ACTION_VIEW同时，指定Data为所要播放的Audio的Uri对象，并指定格式信息，就可以调用播放器来播放该Audio了

    带播放列表的jQuery音乐播放器

    我们经常可以在一些个人博客中看到各种各样的音乐播放器，它可以让你在阅读文章的同时...这次我们分享的这款音乐播放器使用了jQuery技术，使得网页中的音乐播放器具备播放列表的功能，点击列表即可切换至相应的歌曲。

    WondershareStreamingAudioRecorder(网页音乐录音软件)V2.2.2.1无限制特别版

    Wondershare Streaming Audio Recorder是一个使用虚拟声卡来录制由声卡发出的声音，可从在线音乐网站和音乐电台如MySpace，Napster，Rhapsody，XM广播，在线广播等录制音频。录制后，你可以分割音频文件，编辑ID3...

    MidiPlayer:直接播放 MIDI 音乐的 javascript 类，无需插件

    播放器 直接播放 MIDI 音乐的 javascript 类，无需插件。 作者：X. Chen 创建于：2015/4/1 最后修改时间：2015 年 4 月 3 日Github 网站： 关于 MIDI 是一种广泛使用的在线音乐格式。 然而，HTML5 Audio 标签目前...

    foot:让我们用音频标签再听一次Putto！！

    在移动设备上，Naver Radio 作为视频播放器播放，因此在播放时无法使用其他选项卡最近开始支持通过Naver Media Player播放（2015.3.10） 在直播的情况下，它以*.m3u8 (HLS) 的形式提供服务，但在&lt;audio&gt;标签...

    使用HTML5在网页中嵌入音频和视频播放的基本方法

    主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法, 和 标签的使用非常方便,而且使网页视频不再依赖频繁出错的Flash播放器,需要的朋友可以参考下

    midi-player:用于浏览器的MIDI播放器扩展

    中端播放器MIDI播放器浏览器扩展 以hyperlinks和&lt;audio&gt; ， &lt;bgsound&gt; ， &lt;object&gt; ， &lt;embed&gt;标签播放MIDI文件。 支持的文件格式： *.mid ， *.kar ， *.rmi 。 同源限制：MIDI文件必须与...

    TimeCat：神奇的Web记录器和播放器:desktop_computer:（WIP）

    神奇的网络记录器和播放器 描述 English | TimeCat是一种开放源代码网页记录工具，它生成的文件不是真实视频，但可以像真实视频一样播放，从而完全恢复用户在浏览器中的操作。 文献资料 您可以在上找到TimeCat...

    Java开发技术大全(500个源代码).

    firstApplet.htm 用来装载Applet的网页文件 第2章 示例描述：本章介绍开发Java的基础语法知识。 accumulationByDoWhile.java 用do~while语句写的累加程序 accumulationByFor.java 用for语句写的累加程序 ...

    计算机应用技术(实用手册)

    如果我们使用的硬盘是预定义以外的，那么就应该设置硬盘类型为USER，然后输入硬盘的实际参数（这些参数一般在硬盘的表面标签上）；如果没有安装IDE设备，我们可以选择NONE参数，这样可以加快系统的启动速度，在一些...

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