Html5 音频播放器实例

最新推荐文章于 2019-06-27 10:42:11 发布
最新推荐文章于 2019-06-27 10:42:11 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： JavaScript 文章标签： html5 实例 audio
最近一直在看Html5高级程序设计，其中有两个很炫的元素audio 和video，可以制作一些效果很不错的应用。

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

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


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

媒体元素的只读特性：



可用脚本控制的特性值


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

相关代码：

Html Content:

<audio id="myMusic"></audio>
    <!-- 放置一个隐藏域，存放媒体文件暂停的时间点 -->
	<input id="PuaseTime" type="hidden"/>

	<!-- 编写音乐盒界面 -->
	<div class="MusicBox">
		<!-- 上一个媒体文件的图标 -->
		<div class="LeftControl"></div>
		<!-- 开始和暂停的控制图标 -->
		<div id="MainControl" class="MainControl"></div>
		<!-- 下一个媒体文件的图标 -->
		<div class="RightControl"></div>
		<!-- 进度框 -->
		<div class="ProcessControl">
			<div class="SongName">Start Music</div>
			<div class="SongTime">00:00 | 00:00</div>
			<!-- 全部时长进度条 -->
			<div class="Process"></div>
			<!-- 已播放时长进度条 -->
			<div class="ProcessYet"></div>
		</div>
		<div class="VoiceEmp"></div> <!--静音图标 -->
		<div class="VoiceProcess" ></div> <!-- 全音量进度条 -->
		<div class="VoiceProcessYet" ></div><!--  当前音量进度条 -->
		<div class="VoiceFull" ></div><!-- 全音量图标 -->
		<div class="ShowMusicList" ></div><!--  显示或隐藏媒体文件列表图标 -->
	</div>

		<div class="MusicList">  <!-- 媒体文件列表区域 -->
		   <div class="Author"></div> <!-- //当前媒体文件的 -->
		   <div class="List"> <!-- //媒体文件列表 -->
		     	<div class="Single" > <!-- //单个媒体文件 -->
		     		<span class="SongName"  KV="因为爱情" >01.因为爱情</span>
    			</div> 
    			<div class="Single" > <!-- //单个媒体文件 -->
		     		<span class="SongName"  KV="情歌" >02.情歌</span>
    			</div> 
     		</div>
		</div>

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;
 
      }

JS脚本： 

<script type="text/javascript">
	$(document).ready(function(){

		//获取音频工具
		var audio = document.getElementById('myMusic');
		$('.VoiceProcessYet').css('width',(audio.volume)*66); //显示音量
		/*开始、暂停按钮*/
		/*$('#MainControl').toggle(function(){ //在jquery1.8之前的版本不会隐藏
			$(this).removeClass('MainControl').addClass('StopControl');
			if(audio.src==''){
				var DefaultSong =$('.Single .SongName').eq(0).attr('KV');
				$('.MusicBox .ProcessControl .SongName').text(DefaultSong);
				$('.Single .SongName').eq(0).css('color','#E23581');
				audio.src ='Media/'+DefaultSong+'.mp3';
			}
			audio.play();

			TimeSpan();
		},function(){
			$(this).removeClass('StopControl').addClass('MainControl');
			audio.pause();
		});*/
		/*jqyery1.9之后的版本就不能用toggle切换不同事件了*/

		var Cnum=0; //点击次数变量
		$('#MainControl').click(function(e){
			if(Cnum++ %2 == 0){
				$(this).removeClass('MainControl').addClass('StopControl');
				if(audio.src==''){
					var DefaultSong =$('.Single .SongName').eq(0).attr('KV');
					$('.MusicBox .ProcessControl .SongName').text(DefaultSong);
					$('.Single .SongName').eq(0).css('color','#E23581');
					audio.src ='Media/'+DefaultSong+'.mp3';
				}
				audio.play();

				TimeSpan();
			}else{
				$(this).removeClass('StopControl').addClass('MainControl');
				audio.pause();
			}
			e.preventDefault();
		});

	

		/*========显示或隐藏播放列表========*/
		/*$('.ShowMusicList').toggle(function(){ 
			$('.MusicList').show();

			var MusicBoxRight = $('.MusicBox').offset().left + $('.MusicBox').width();
			var MusicBoxBottom= $('.MusicBox').offset().top + $('.MusicBox').height();

			$('.MusicList').css({'left':(MusicBoxRight-$('.MusicList').width())*0.5,'top':(MusicBoxBottom+15)});
		},function(){
			$('.MusicList').hide();
		});*/

		var Cnumx=0;
		$('.ShowMusicList').click(function(e){
			if(Cnumx++ % 2 == 0){
				$('.MusicList').show();
				var MusicBoxRight = $('.MusicBox').offset().left + $('.MusicBox').width();
				var MusicBoxBottom= $('.MusicBox').offset().top + $('.MusicBox').height();
				$('.MusicList').css({'left':(MusicBoxRight-$('.MusicList').width())*0.5,'top':(MusicBoxBottom+15)});
			}else{
				$('.MusicList').hide();
			}
		});

		/*===========播放列表选择操作===========*/
		$('.MusicList .List .Single .SongName').click(function(){
				$('.MusicList .List .Single .SongName').css('color','#fff');
				$('#MainControl').removeClass('MainControl').addClass('StopControl');
				$(this).css('color','#E23581');
				var songname = $(this).attr('KV');
				$('.MusicBox .ProcessControl .SongName').text(songname);
				audio.src='Media/'+songname+'.mp3';
				audio.play();
				TimeSpan();
		});

		/*=======上一曲=====*/
		$('.LeftControl').click(function(){
					$('.MusicList .List .Single .SongName').each(function(){
						if($(this).css('color')=='rgb(226, 53, 129)'){
							// 检测是否为列表第一首的歌曲
							var  Istop = $(this).parent('.Single').prev().length==0 ? true : false;
							var PrevSong;

							if(Istop){
								PrevSong =  $('.Single').last().children('.SongName').attr('KV');
								$('.Single').last().children('.SongName').css('color','#E23581');
							}else{
								PrevSong =$(this).parent('.Single').prev('.Single').children('.SongName').attr('KV');
								$(this).parent('.Single').prev('.Single').children('.SongName').css('color','#E23581');
							}

							audio.src='Media/'+PrevSong+'.mp3';
							$('.MusicBox .ProcessControl .SongName').text(PrevSong);
							$(this).css('color','#fff');
							audio.play();
							return false;//跳出循环				
						}	
					});
				});




		/*=======下一曲=====*/

		$('.RightControl').click(function(){
			$('.MusicList .List .Single .SongName').each(function(){
				if($(this).css('color')=='rgb(226, 53, 129)'){
					// 检测是否为列表最后的歌曲
					var  IsBottom = $(this).parent('.Single').next().length==0 ? true : false;
					var NextSong;

					if(IsBottom){
						NextSong =  $('.Single').first().children('.SongName').attr('KV');
						$('.Single').first().children('.SongName').css('color','#E23581');
					}else{
						NextSong =$(this).parent('.Single').next('.Single').children('.SongName').attr('KV');
						$(this).parent('.Single').next('.Single').children('.SongName').css('color','#E23581');
					}

					audio.src='Media/'+NextSong+'.mp3';
					$('.MusicBox .ProcessControl .SongName').text(NextSong);
					$(this).css('color','#fff');
					audio.play();
					return false;//跳出循环				
				}	
			});
		});


		/*========静音======*/
		$('.VoiceEmp').click(function(){
			$('.VoiceProcessYet').css('width',0);
			audio.volume=0;
		});


		/*=======最大音量===*/
		$('.VoiceFull').click(function(){
			$('.VoiceProcessYet').css('width',66);
			audio.volume=1;
		});

		/*音量进度条调节*/
		//音量增加
		$('.VoiceProcess').click(function(e){
			//音量进度条基准参数
			var VoiceProcess = $('.VoiceProcess').offset();
			var VoiceProcessStrat = VoiceProcess.left; //左偏移量
			var VoiceProcesslength = $('.VoiceProcess').width();

			var currentProcess = e.clientX - VoiceProcessStrat;
			VolumeProcessRange(currentProcess/VoiceProcesslength);
			$('.VoiceProcessYet').css('width',currentProcess);

			
		});
		//音量减少
		$('.VoiceProcessYet').click(function(e){

			//基准参数
			var VoiceProcess = $('.VoiceProcess').offset();
			var VoiceProcessStrat = VoiceProcess.left; //左偏移量
			var VoiceProcesslength = $('.VoiceProcess').width();

			var currentProcess = e.clientX - VoiceProcessStrat;
			VolumeProcessRange(currentProcess/VoiceProcesslength);
			$('.VoiceProcessYet').css('width',currentProcess);
		});


		/*====播放进度条调节===*/
		//进度增加
		$('.Process').click(function(e){

			var Process = $('.Process').offset();
			var ProcessStart = Process.left;
			var ProcessLength = $('.Process').width();

			var currentProcess = e.clientX - ProcessStart;

			DurationProcessRange(currentProcess/ProcessLength);
			$('.ProcessYet').css('width',currentProcess);
			$('#MainControl').removeClass('MainControl').addClass('StopControl');

		});

		//进度减少
		$('.ProcessYet').click(function(e){

			var Process = $('.Process').offset();
			var ProcessStart = Process.left;
			var ProcessLength = $('.Process').width();

			var currentProcess = e.clientX - ProcessStart;

			DurationProcessRange(currentProcess/ProcessLength);
			$('.ProcessYet').css('width',currentProcess);
			$('#MainControl').removeClass('MainControl').addClass('StopControl');

		});


		/*======监听媒体文件结束ended，实现歌曲结束循环播放下一曲=======*/

		audio.addEventListener('ended',function(){

			$('.MusicList .List .Single .SongName').each(function(){

				if($(this).css('color')=='rgb(226, 53, 129)'){
					var IsBottom =$(this).parent('.Single').next().length==0 ? true:false;
					var NextSong;

					if(IsBottom){
						NextSong = $('.Single').first().children('.SongName').attr('KV');
						$('.Single').first().children('.SongName').css('color','#E23581');
					}else{
						NextSong = $(this).parent('.Single').next().children('.SongName').attr('KV');
						$(this).parent('.Single').next().children('.SongName').css('color','#E23581');
					}

					audio.src = 'Media/'+NextSong+'.mp3';
					$(".MusicBox .ProcessControl .SongName").text(NextSong);
					$(this).css('color','#fff');
					audio.play();
					return false;
				}
			});
		},false);







	});//ready end
	

	// 时间进度处理程序
	function  TimeSpan(){

		var audio = document.getElementById('myMusic');
		var ProcessYet= 0; //记录当前播放进度条长度

		setInterval(function(){
			ProcessYet =(audio.currentTime/audio.duration)*500; //width:500px
			$('.ProcessYet').css('width',ProcessYet); 

			var currentTime = TimeDispose(audio.currentTime);
			var timeAll = TimeDispose(TimeAll());

			$('.SongTime').html(currentTime+"|"+timeAll);

		},1000);
	}

	//时间格式处理程序,时间以秒为单位，需要格式化处理
	function TimeDispose(number){

		var minute = parseInt(number/60);
		var second = parseInt(number%60);

		minute=(minute>=10)?minute:"0"+minute;
		second=(second>=10)?second:"0"+second;

		return minute+":"+second;
	}

	//返回歌曲总时间程序
	function TimeAll(){
		var audio = document.getElementById('myMusic');
		return audio.duration;
	}


	//音量进度条程序
	function VolumeProcessRange(rangeVal){
		var audio = document.getElementById('myMusic');
			audio.volume=parseFloat(rangeVal);
	}

	//播放进度条程序
	function DurationProcessRange(rangeVal){
		var audio = document.getElementById('myMusic');
			audio.currentTime = rangeVal*(audio.duration);
			audio.play();
	}
	</script>

页面效果：


源码下载：

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

原文出处： http://www.cnblogs.com/wzh2010/archive/2012/05/21/2511130.html





Monarch_lin
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
播放音乐的html语言,Html5音频和视频播放示例详解
weixin_30548963的博客
05-31 217
html5中的音频和视频codebase="swflash.cab#version=6,0,10,0">您的浏览器不支持video！var video = document.getElementById("video");//监听错误信息video.addEventListener("error",function(){var error = video.error;var code = e...
html5 音频实例,HTML5音频audio属性(示例代码)
weixin_28914101的博客
06-29 613
audio 的控制函数主要有：load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载play() 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放pause() 暂停处于播放状态的音频、视频文件audio 的只读媒体特性有：duration 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaNpaused 如果媒体文件被暂停，则返...
html5 audio音频播放全解析
weixin_33830216的博客
12-22 2208
html5开启了一个新时代，因为它让浏览器本身变得不那么被动，audio api就是一个典型的列子，在html5还没确定之前，如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可以不用Flash插件就可以听音乐看视频，当然这些能否实现还跟你用的浏览器有关。     1.h...
HTML5在线录音实例
08-31
支持谷歌和火狐，可用
html5音乐播放器例子源码
09-09
html5音乐播放器例子源码
html5+css3酷炫音频播放器
04-02
总的来说，"html5+css3酷炫音频播放器"是一个综合运用了HTML5媒体元素和CSS3新特性的实例，展示了如何将技术与设计相结合，创造出既实用又美观的网页应用。通过学习和实践这个项目，开发者可以提升在网页交互设计和...
HTML5实现Winamp2.9音频播放器插件
12-12
"HTML5实现Winamp2.9音频播放器插件"项目正是利用这些特性，重现了经典的Winamp 2.9音频播放器的外观和功能，但采用的是更现代的技术栈。 首先，我们来了解一下Winamp2-js。这是一个开源项目，旨在通过HTML5和...
HTML5迷你音乐播放器特效
07-24
在这个音乐播放器中，HTML5的`<audio>`标签起到了核心作用，它允许直接在网页上嵌入音频文件并提供了控制音频播放的接口。例如，可以设置`src`属性来指定音频源，通过JavaScript访问`<audio>`元素的API来实现播放、...
html5 css3响应触摸友好的音频播放器
11-07
总的来说，“html5 css3响应触摸友好的音频播放器”是一个综合运用HTML5的新特性、CSS3的布局和样式技术，以及JavaScript事件处理来创建跨平台、用户友好的音频播放器的实例。通过深入理解并熟练掌握这些技术，...
html5之音乐播放器实例 （可以切换歌曲和背景照片）
亲，如果文章对你有帮助的话请点个关注吧！
01-04 6793
一个学期过去了 积累了很多知识，但是一直没有机会更新博客 内容很多，很杂乱但实际上的操作课并不多，好多源码都丢失了 这是一个web在线音乐播放器，使用html的&lt;audio&gt;标签，js进行控制 可以播放、暂停、上一首、下一首 因为只是一个小作业，就没有做太仔细的设计，不过配上日漫歌曲和图片还挺好看 &lt;!DOCTYPE html PUBLIC "-//W3C//D...
Html-音视频基础实例
Swxctx
07-28 694
音频： 使用embed 使用object 使用audio 雅虎播放器 Play mp3 Play wav 使用超链接 点击播放 视频： 点击播放(video) 使用video（object） 使用超链接 点击播放
html网页视频播放，用图片控制其播放还是暂停
weixin_44003632的博客
06-11 1948
效果图如下： 视频的大小可以自己去设置，当鼠标放在视频上会出现暂停或开始的图片，点击会相应给出开始或者暂停。 话不多说，直接上代码： <!DOCTYPE html> <!-- saved from url=(0033)https://www.68gainian.com/chtml5/ --> <html> <head> <title>&...
HTML5音频与视频实例（带声音的导航、视频与canvas结合、自制播放器）
努力，追梦的博客
05-09 6360
实例1：带声音的导航   无标题文档 *{ margin:0; padding:0;} #ul1{ width:1000px; height:30px;} #ul1 li{ list-style:none; width:100px;height:30px; background:red; color:white; border:1px #000 solid; floa
html5---音频视频播放
sjtu_chenchen的专栏
05-11 1180
<!DOCTYPE HTML> <html> <head> <script> window.onload=function () { var playbtn=document.getElementById("play"); var video=document.getElementById("video"); playbtn.onclick=f
Canvas绘制音乐播放器
越陌度阡
06-27 1344
给大家分享一个用Canvas绘制音乐播放器的代码，主要向大家介绍在Canvas绘图中解决常见的两个问题。多个图片一起绘制时，如何处理好渲染完成时间差？如何给Canvas绘制的图片绑定事件？ 绘图效果如下： 实现代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT......
HTML5 CSS3实战——自定义音乐播放器（一）
热门推荐
a253664942的专栏
05-01 2万+
前几天才刚开始接触HTML5和CSS3。学习了一下里面的一些炫酷的新特性。不过，对于原生的HTML5的媒体播放器，真的不得不吐槽：就三个按钮 界面还那么丑。所以觉得自己整一个好看的播放器。老话说：说不如干，纸上谈兵终觉浅。所以结合这几天来学的东西，自己写了一个HTML5的播放器。 HTML5原生播放器： 我们的效果图：歌曲列表：首先分析下界面，将主面板解剖一下： 整个界面都是用H
HTML5用audio标签做一个最简单的音频播放器
邱慕夏 没有比脚更长的路，没有比人更高的山
10-27 1万+
在做系统的时候，要求做一个音频播放器，就在网上查找了一些资料，发现这样的资料还是很千篇一律的，EasyUI框架并没有给我们一个音频播放器的功能，在bootstrap上有，但是也是结合html5来写的，因此，我们在这里就用纯的html5血一个音频播放器，如何播放本地的音频。 首先，大家在myeclipse上建立一个自己的web项目： 其实，这里的代码都不难，主
HTML5与JavaScript游戏设计进阶指南
5. **音频处理**：通过 WebAudio API 创建定制的音乐和音效播放器，实现丰富的音频体验。 6. **关键帧动画与交互**：掌握帧速率控制和游戏循环技巧，以及如何创建响应鼠标的交互式元素。 7. **粒子效果与场景管理*...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值