HTML+CSS+JavaScript做的音乐播放器，就当是入门的小东西吧～

最新推荐文章于 2024-08-03 22:25:10 发布
最新推荐文章于 2024-08-03 22:25:10 发布
阅读量4k 收藏 4
点赞数 1
分类专栏： 武器安装 文章标签： HTML音乐盒
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Crazy_Women/article/details/29576593
版权

疯了，因为 有.mp3文件搞得项目太大，没法打包上传，懒的去删了，直接上代码～ 

music.html

<!DOCTYPE HTML>
<html>

<head> 
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:168px;
	height:85px;
	z-index:10;
	left: 97px;
	top: 68px;
	color:#000066;

	-webkit-transform:rotate(30deg); 
	text-shadow: 5px 5px 5px #0066FF;
	
}


-->
</style>
</head>

<body>
<div id="Layer1">这是音乐盒</div>
<div class="main">

 <div class="musicHead">
 
   <div class="musicLeft">
     <div class="prev"><input type="button" onClick="prev()" value="上一曲"/> </div>
     <div id="MainControl", class="MainControl"></div>
     <div class="next"> <input type="button" onClick="next()" value="下一曲"/> </div>
   </div>
 

  <div class="musicCenter">
   <marquee style="width:500px;"><div id="singer">1 歌名《简短铃声》--测试</div></marquee>
   <div class="ProcessControl"><!--进度条-->
     <div class="Process"></div> <!-- 全部时长-->
     <div class="ProcessYet"></div> <!--已经播放时长-->
   </div>
  </div>
 
 <div class="musicPlayModel"> <div id="timeshow"></div>   
 <div id="modelshow"><a href="javascript: getModel(3);"> <img src="photo/列表循环.png"/></a>
   
 </div>        
 <div class="sound">
 <div class="soundImageOpen"></div> 
 <div class="VoidProcess"></div>
 <div class="VoidProcessYet"></div>
 
 </div>
 
 
 </div>
 
  </div>
  
<div class="redLine"></div>
<div class="musicBottom">
<div class="title">歌曲名                                艺人名                                 时长</div>

</div>




</div>

 <audio id="video1" autoplay="true">
 <source id="mp4_src" src="music/123.mp3" type="audio/mp4">
  Your browser does not support the audio element.
</audio>
<script type="text/javascript" src="js/js.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
</body>

</html>

style.css 


/* CSS Document */



 
	
	
	.main
	
	{
	
	  margin-left:200px;
	  margin-top:100px;
	 
	  border-width: 2px;
  
      border-style: solid;
 
      border-color:#FF0066;  
  
      width:1280px;
  
      height:700px;
  
      padding:2px 5px;
  
      position:absolute;
  
      z-index:9;
	  background-color:#663366;
	  
	  box-shadow: 30px 30px 5px #888888; 
	  
	 
	
	} 
	
	.musicHead
	{
	   width:1280px;
	  padding:13px 9px;
	  height:60px;
	  
	  
	
    }
	.musicLeft
	{
	  float:left;
	  padding:3px 5px;
	  width:170px;
	  margin-top:12px;
	
	}
	
	.musicCenter
	{    float:left;
	     width:724px;
		 padding:3px 5px;
		 height:20px;
	}
	
	.musicBottom
	{
	margin-top:6px;
	
	
	}
	
	
	.title
	{
	padding:5px;
	margin-left:20px;
	
	
	}
	
	.songArray
	{
	position:absolute;
	color:#FF0066;
	padding:5px;
	left: 230px;
	top: 250px;
	z-index:10;
	text-shadow: 5px 5px 5px #FF0000;
	
	}
	
	
	.songArrayLeft
	{
	 
	  width:300px;
	  float:left;
	  text-shadow: 5px 5px 5px #FF0000;
	
	}
	.songArrayCenter
	{
	  width:300px;
	    float:left;
		text-shadow: 5px 5px 5px #FF0000;
	
	}
	.songArrayRight
	{
	  width:300px;
	    float:left;
		text-shadow: 5px 5px 5px #FF0000;
	
	}
	
	
	
	.musicPlayModel
	{
	   margin-top:22px;
	   float:left;
	   width:330px;
	   height:40px;
	}
	
	#timeshow
	{
	margin-left:8px;
	float:left;
	width:100px;
	color:#FFFFFF;
	
	}
	.modelshow
	{
	margin-left:8px;
	float:left;
	width:30px;
	height:40px;
	
	}
	
	.sound
	{
	position:absolute;
	width:200px;
	height:20px;
	z-index:10;
	left: 1082px;
	top: 35px;
	margin-left:5px;
	
	}
	
	.soundImageOpen
	{
	width:25px;
	height:25px;
	float:left;
	background:url(../photo/音量开.png) no-repeat;
	
	
	
	}
	.soundImageClose
	{
	width:25px;
	height:25px;
	float:left;
	background:url(../photo/音量关.png) no-repeat;
	
	}

 
	.VoidProcess
	{
	
	  width: 66px;

      height: 8px;
 
      cursor: pointer;
 
      background-color: #000000;     
      
	  
	  
      float:left;
	  margin-top:6px;
	  margin-left:5px;
	
	   border:2px solid;
      border-radius:25px;
	  
	
	
	}
	
	.VoidProcessYet
	
	{
	width: 0px;
	height: 8px;
	position:absolute;
	cursor: pointer;
	background-color: #FF0000;
	float:left;
	margin-top:6px;
	margin-left:10px;
	left: 19px;
	top: 0px;
	
	 border:2px solid;
      border-radius:25px;
	  
	
	
	}
	
	
	
	
	
	
	
	
	
	
	
	
	.ProcessControl
 
    {
 
       width:720px;
 
       padding: 5px 10px 10px 10px;
 
       float:left; 
 
       height:20px; 
 
       color:#ffffff;
	   
	  
 
    }
	
	 .Process
 
   {

      width: 720px;
	  float: left;
      height: 8px;
      cursor: pointer;
      background-color:#000000;
	  
	  border:2px solid;
      border-radius:25px;
	  
 
      
 
    }

   
 
   .ProcessYet

    {
 
      width: 0px;
 
      position:absolute;
 
      height: 8px;
 
      cursor: pointer;
 
      background-color: #FF0000;
	  
	   z-index:4; 
	   border:2px solid;   
       border-radius:25px;
	   
	  
 
    }
	
	.prev
	{
	height:30px;
	width:40px;
	float:left;
	
	}
	
	#singer
	{
	color:#FFFFFF;
	
	
	}
	
	.MainControl
	{
	
       width:30px;
       height:30px;
	   margin-left:20px;
       margin-right:5px;
 
        float:left; 
	    background:url(../photo/暂停.jpg) no-repeat;
	    background-size:30px;   
	
	}
	.stop
	{
	
	 width:30px;
       height:30px;
	   margin-left:20px;
       margin-right:5px;
 
        float:left; 
	   
		 background:url(../photo/开始.jpg) no-repeat;
	    background-size:30px;   
	
	}
	
	
	
	.next
	{
	height:30px;
	width:40px;
	float:left;
	
	}
	
	
	.redLine
	 {
	 height:3px;
	 background:#FF0066;
	
     }
	 
	 .songList
	 {
	 width:1024px;
	 
	 
	  }
	   开始与结束的切换
	 
	  #begin
	  {
	  width:5px;
	  height:5px;
	  background: #FF0000;
	  
	  }
	  
	  .end
	  {
	   width:5px;
	  height:5px;
	  background:  #0000FF;
	   
	  }
	  
	  a{text-decoration:none;
	  color:#FF0066;}
a:hover{text-decoration:none;
color:#6600FF;
}
最后是js.js  

alert(1);
var player=document.getElementById("video1");
var mysongs=new Array("./music/简短铃声.mp3","./music/矜持.mp3","./music/很受伤.mp3","./music/爱你的最后一天.mp3","./music/三个人的时光.mp3","./music/有关爱情.mp3","./music/foryou.mp3","./music/123.mp3");
var singerName=new Array("1 简短铃声 "," 2 矜持"," 3 很受伤 "," 4 爱你的最后一天","5 三个人的时光","6 有关爱情","7 for you","8 123");
var nowSong=new Array("1 歌名《简短铃声》--测试","2 歌名《矜持》--王菲","3 歌名《很受伤》--任贤齐","4 歌名《爱你的最后一天》--任贤齐","5 歌名《三个人的时光》--三藏","6 歌名《有关爱情》--DJ","7 歌名《for you》--Byane","8 歌名《123》--神人")
var singer=new Array("测试","王菲","任贤齐","任贤齐","三藏","DJ","Byane","神人");
var time=new Array("00:04","04:38","04:31","03:52","01:30","04:04","06:33","00:09");
var songIndex=0;
document.write("<br>");
player.addEventListener('ended',onPlayEnd);

player.οnlοadstart=Play(); //音乐load的时候就开始调用的函数

//player.οnlοadstart=totaltime();


//未封装，歌曲列表
document.write('<div class="songArray">');



//暂时认为时间是静态存入数组的，估计也是，因为动态要等音频加载完了才能一个一个现实！

for(var i=0;i<singerName.length;i++)
{
       
     document.write('<div class="songArrayLeft">'+"<a href='javascript: getSongName(" + i + ");'>"+singerName[i]+"</a>"+'</div>');
	 
	 document.write('<div class="songArrayCenter">'+singer[i]+'</div>');
	
	 document.write('<div class="songArrayRight">'+time[i]+'</div>');
	 
	 document.write("</br>");
	 
}

document.write('</div>');



//



function getSongName(num)
{

     document.getElementById("mp4_src").src=mysongs[num];
     document.getElementById("singer").innerHTML=nowSong[num];
      Load();
     
}





$(".Process").click(function (e) {

  
    
     

        var Process = $(".Process").offset();
        
          
 
        var ProcessStart = Process.left;


        var ProcessLength = $(".Process").width();<!-- 720-->
 
       
        
        var CurrentProces = e.clientX - ProcessStart;
   
        
       PointToWhere(CurrentProces / ProcessLength);
        
         $(".ProcessYet").css("width", CurrentProces);
 
     });

//点击已经播放过的进度条（向前点击）

 $(".ProcessYet").click(function (e) {
 
  
 
         //播放进度条的基准参数
 
         var Process = $(".Process").offset();
 
         var ProcessStart = Process.left;
 
         var ProcessLength = $(".Process").width();
 
         var CurrentProces = e.clientX - ProcessStart;
 
         PointToWhere(CurrentProces / ProcessLength);
 
         $(".ProcessYet").css("width", CurrentProces);
 
     });
 
 

 function PointToWhere(PointInTotal) {
 
    
     player.currentTime = PointInTotal * player.duration;
 
     Play();
 
 }
 
 
 $(".VoidProcess").click(function (e) {
 
         //音量进度条的基准参数
 
         var VoidProcess = $(".VoidProcess").offset();
 
         var VoidProcessStart = VoidProcess.left;
 
         var VoidProcessLength = $(".VoidProcess").width();
 
  
 
         var CurrentProces = e.clientX - VoidProcessStart;
 
         VolumeProcessRange(CurrentProces / VoidProcessLength);
 
         $(".VoidProcessYet").css("width", CurrentProces);
 
     });
 
 
 
     //音量进度条时间（进度减少）
 
     $(".VoidProcessYet").click(function (e) {
 
         //音量进度条的基准参数
 
         var VoidProcess = $(".VoidProcess").offset();
 
         var VoidProcessStart = VoidProcess.left;
 
         var VoidProcessLength = $(".VoidProcess").width(); 
   
         var CurrentProces = e.clientX - VoidProcessStart;
 
         VolumeProcessRange(CurrentProces / VoidProcessLength);
 
         $(".VoidProcessYet").css("width", CurrentProces);
 
     }); 
 
 
 
 function VolumeProcessRange(rangeVal) {
 
     
 
     player.volume = parseFloat(rangeVal);
 
 }
 
 
 
 






 
function TimePass() 

{  
   var ProcessYet = 0;

    setInterval(function () {
 
         var ProcessYet = (player.currentTime / player.duration) * 720;

         $(".ProcessYet").css("width", ProcessYet);
 
        var currentTime = timeDispose(player.currentTime);
 
      var  timeAll = timeDispose(player.duration);
         
		 document.getElementById("timeshow").innerHTML=currentTime+"|"+timeAll;//时间显示
		 
		
        
     }, 1000);  <!--每秒调用一次-->
 


     
}
//同样的代码，就是显示时间的那个，放在函数外面就不好使，而且放在一般的函数中也不好使,目测是因为音乐加载的问题，只有音乐全部加载出来才能出现时间。
//函数内的赋值不能在函数外直接调用，（这个不肯定），而且尤为不应该在音乐尚未加载的时候就调用！




	


function TotalTime()
{
   alert(timeDispose(player.duration));
}

function currentTime()

{
    alert(timeDispose(player.currentTime));

}

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 onPlayEnd()
{

if(modelnum==3&&songIndex==mysongs.length-1)
  { 
   
     songIndex=-1;
     document.getElementById("mp4_src").src=mysongs[songIndex];
     document.getElementById("singer").innerHTML=singerName[songIndex];
      Load();
   }
if(modelnum==4)
{
     songIndex= parseInt(mysongs.length * Math.random());
     document.getElementById("mp4_src").src=mysongs[songIndex];
     document.getElementById("singer").innerHTML=singerName[songIndex];
      Load();
   
}

if(modelnum==0||modelnum==3&&songIndex!=mysongs.length-1)
{ 
 next();
}

  if(modelnum==1)
  { 
     
     Load();
     
  }

 


}




 


//点击下一曲或者上一曲要判断一下 开始和停止按钮的css状态! 应该放在next和prev中，不过放入进去后发现，每次点下一曲之后都需要点两次暂定才能暂停，试过多次修改，问题无法解决，暂未应用！
function IshasCss()
{
 if($("#MainControl").hasClass("MainControl")){} //#MainControl是id ～
 else { $("#MainControl").removeClass("stop").addClass("MainControl");	}
 
}

function next()
  { 
 
   
      $(".ProcessYet").css("width", 0);
	  
	 
   
   
    if(modelnum==1)
  {
       Load();
   }
  if(modelnum==2||modelnum==0)
   {
      if(songIndex<mysongs.length-1)
   {
   songIndex=this.songIndex+1; 
   document.getElementById("mp4_src").src=mysongs[songIndex];
   document.getElementById("singer").innerHTML=nowSong[songIndex];
   Load();
   }
   else {alert("已经播放到最后一首");player.pause();}
   
   

    }

   if(modelnum==3)
  {
        if(songIndex<mysongs.length-1)
      {
       songIndex=this.songIndex+1; 
       }
     else {songIndex=0;}
     document.getElementById("mp4_src").src=mysongs[songIndex];
     document.getElementById("singer").innerHTML=nowSong[songIndex];
      Load();
  }

    if(modelnum==4)
 {
    songIndex= parseInt(mysongs.length * Math.random());
     document.getElementById("mp4_src").src=mysongs[songIndex];
     document.getElementById("singer").innerHTML=nowSong[songIndex];
     Load();
 }

   

    }
	
	
	
	
	
	
	
	
	

function prev()
{
	
	
  $(".ProcessYet").css("width", 0);

  if(modelnum==1)
  {
       Load();
   }

 if(modelnum==2||modelnum==0)
  {
   if(songIndex>0)
  {
   songIndex=this.songIndex-1;
   document.getElementById("mp4_src").src=mysongs[songIndex];
   document.getElementById("singer").innerHTML=nowSong[songIndex];
    Load(); }

   else{alert("已经播放到最开始的一首");player.pause();}
   

   }

 if(modelnum==3)
  {
      if(songIndex>0)
      {
       songIndex=this.songIndex-1; 
       }
      else {songIndex=mysongs.length-1;}
      document.getElementById("mp4_src").src=mysongs[songIndex];
      document.getElementById("singer").innerHTML=nowSong[songIndex];
      Load();
  }	
 if(modelnum==4)
 {
    songIndex= parseInt(mysongs.length * Math.random());
     document.getElementById("mp4_src").src=mysongs[songIndex];
     document.getElementById("singer").innerHTML=nowSong[songIndex];
     Load();
 }

}
var modelnum=0;


function getModel(model)
{



 modelnum=model;

 

}




  
 var beginorstop=document.getElementById("begin");
 var end=document.getElementById("end");
 var changemodel=document.getElementById("modelshow");
 //切换
  $(document).ready(function () {
			//切换开始暂停标签				  
    $("#MainControl").toggle(
		  function () {
  
            $(this).removeClass("MainControl").addClass("stop");
  
            player.pause();},
  
          function () {
			  
			
    
            $(this).removeClass("stop").addClass("MainControl");
			  
  
            player.play();
  
            TimePass(); 
  
                           });
	
	//模式的切换
	$("#modelshow").toggle(
			function () {
  
          changemodel.innerHTML="<img src="+"\""+"photo/单曲循环.png"+"\""+">";
		   getModel(1);
		   
  
                          },
  
            
	       function ()  {
  
          changemodel.innerHTML="<img src="+"\""+"photo/随机播放.png"+"\""+">";
		  getModel(4);
       
  
                         },
		  function ()  {
  
           changemodel.innerHTML="<img src="+"\""+"photo/列表循环.png"+"\""+">";
           getModel(3);
          
                         });
	
	
	//音量的切换
	$(".soundImageOpen").toggle(
		  function () {
  
            $(this).removeClass("soundImageOpen").addClass("soundImageClose");
  
              player.volume = 0;},
  
          function () {
			  
			
    
            $(this).removeClass("soundImageClose").addClass("soundImageOpen");
			  
  
           player.volume = 1; 
  
                           });
	
	
	
					          }) ;
  
  
  
    
  
	
		
		
  
  

function Play()
{
     player.play();
  
     TimePass(); 
}


function stop()
{
  player.pause();
}


function Load()
{
    player.load();

     TimePass();
}

//function quickRate()
//{
//  player.playbackRate=2;
//}

//function normalRate()
//{
//    player.playbackRate=1;
//}

//function lowerRate()
//{
//    player.playbackRate=0.5;
//}



三藏_
关注
专栏目录
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 2380
，HTML5和CSS3核心知识
3万字干货HTML+CSS入门指南（建议收藏）
李南江
08-01 4674
什么是浏览器 浏览器是安装在电脑里面的一个软件， 能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件。 就好比QQ一样都是安装在电脑里面的一个软件， 只不过功能不同而已 常见主流浏览器 浏览器市场份额-国内统计 浏览器市场份额-国外统计 不同的浏览器有不同的浏览器内核， 浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现 IE内核 Trident 谷歌内核 WebKit / Blink 火狐内核 Gecko Saf
CSS3迷你音乐播放器
07-10
这是一款基于CSS3的音乐播放器，界面十分简单清新，播放器支持开始播放、暂停播放和结束播放已经当前播放时间的功能，非常实用。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发哦~~其属于MM应用引擎的应用开发部署工具，它是基于云计算基础架构，依托中国移动IDC资源池基础业务的互联网应用开发运行托管平台，为Web和移动应用开发者提供应用开发、测试、跨平台编译（Android/iOS）、应用发布和云端托管一站式服务，帮助开发者快速构建和维护应用。
用js，css做一个音乐播放器
ke1ying的博客
07-11 3199
做好如图所示： 下面开始上代码： html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/music.css"&gt...
网页设计HTMLS+CSS+JS期末大作业+设计报告
最新发布
weixin_70959864的博客
08-03 462
本次网站设计围绕“爱尚汉堡”这一主题，通过合理的网站规划和精心的方案设计，成功构建了一个内容丰富、功能完善的餐饮类网站。在设计过程中，我们注重用户体验和品牌形象，通过优化页面加载速度和实现响应式布局等技术手段，提升了网站的可用性和可访问性。同时，我们也关注用户反馈和互动，通过AJAX技术实现无刷新加载更多评论等功能，增强了用户的参与感和粘性。总体而言，本次网站设计取得了良好的成果，为爱尚汉堡的品牌推广和用户服务提供了有力的支持。
html5 CSS网页音乐播放器及登录界面
06-16
本文件包含登录界面及播放器源码 以及CSS JavaScript 文件 可打包下载
JavaScript(JS) 音乐播放器
—
03-23 3388
闲的没事写了个音乐播放器 PS:虽然没什么用 1、基本功能(上一曲、下一曲、播放、暂停、音量控制播、播放状态等……) 2、播放列表(可单选删除、可单击播放) 3、播放模式支持(默认：列表循环、单曲循环、随机播放) 4、封装了个Message的消息提示状态有(Success、Error、Warning、info)
javascript音乐播放器
zxf的博客
03-05 430
背景：国内所有的音乐平台隐私收集严重，现有开源的播放器暂未发现功能丰富程度、易用性、修改难度等方面都做的比较均衡的。 介绍：仅基于javascript的开源网页音乐播放器，界面仿百度音乐播放器，支持所有非IE内核浏览器的较新版本。 当前主要功能点： 1、点击缩略图可替换当前媒体的缩略图； 2、播放时缩略图将会自动旋转； 3、支持静音/取消静音； 4、支持调整音量大小； 5、支持切换上一个、下一个媒体； 6、支持暂停/播放媒体； 7、支持0.5倍/1倍/2倍的播放速度切换； 8、支持正序播放/倒序播放/
Web大学生网页作业成品 ：黑色主题个人博客网站设计与实现(HTML+CSS+JavaScript)
HTML网页设计
08-20 974
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构...
快速入门HTML和CSS
m0_54129816的博客
03-12 1833
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言这里只是讲一些我自己学习网页制作后认为可以快速掌握的学习方法和小技巧。因为不可能一篇本章就可以把HTML讲的非常清楚明白。感兴趣的可以向下看一看。一、HTML和CSS是什么？二、清楚要重点学什么说回来网页制作这块，我认为重点学习的话是css和javaScript，html的元素常用的会用后，拿过来知道几个结构我觉得差不多了，css才是能让你的网页焕然一新的工具。另外为什么说javascript也是重点？因为学到最后每个人做出来.
HTML5期末考核大作业网站——卫生与健康HTML+CSS+JavaScript
QQ_____365392777的博客
08-19 443
🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓...
音乐播放器网站+HTML+CSS
05-03
音乐播放器网站，利用HTML+CSS+js做的小网站，实现动态MV的播放
javascript实现音乐播放器
11-16
javascript实现音乐播放器，javascript实现简单音乐播放器，javascript实现炫酷音乐播放器
HTML5+CSS3实现的列表式音乐播放器特效源码
08-28
是一款基于HTML5+CSS3实现的音乐播放器，带有列表播放，音量控制，播放进度，播放时间以及播放模式，上一曲，下一曲等功能。本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用。
Simple Music Player 简洁大气的JavaScript音乐播放器 v1.0.rar
07-05
名称：Simple Music Player 简洁大气的Javaｓｃｒｉｐｔ音乐播放器 作者：海兵大侠 版本：v1.0 更新：2013年10月9日 请到 http://git.oschina.net/hbdx/SimpleMusicPlayer 跟踪本项目的最新消息   使用方法： 1.创建播放器容器节点： id:SimpleMusicPlayer data-music：音乐文件地址 data-auto：是否自动播放 例如:   2.引用JS文件： 当然你也可以下载到本地使用。 将CSS JS IMG放到同一目录下，使用同样的方法创建节点和引用JS文件就可以了。
javascript实现音乐播放
11-05
javascript实现音乐播放, 兼容IE,FF,CHROME等主流浏览器
JavaScript 音乐播放器
weixin_44567289的博客
03-26 1297
JavaScript 音乐播放器 主要功能：快进、快退、暂停、上下一首、禁音、鼠标控制音量、自动下一首、显示歌名 <html> <head> @*不提供音频*@ <meta name="viewport" content="width=device-width" /> <title>ceshi14</title> ...
JavaScript 实现音乐播放器
qq_36194388的博客
07-28 2854
效果 HTML代码 <!--播放器--> <div id="player"> <!--播放控件--> <div id="playerControl"> <div class="playerImg"> <img src="../images/demo3/1.jpg" alt="" width="150" height="150"> &lt..
css音乐播放器
qq_40857831的博客
12-28 1098
<audio controls="controls">   src="music/我的好兄弟.mp3">   src="music/我的好兄弟.wav">   src="music/我的好兄弟.ogg">
HTML5+CSS3+jQuery构建视频播放器教程
“HTML5+CSS3+jQuery制作视频播放器完全指南” 在当前的技术趋势下，HTML5已经逐渐成为网页开发的主流标准，特别是在视频播放领域。随着Flash的逐渐淘汰，许多知名的视频平台如YouTube已经转向HTML5播放器。尽管...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值