JavaScript实现简单音乐播放器

2024-12-18 08:28:28

该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。

阅读本文章你需要对HTML、CSS和Javascript有基本的了解。

话不多说，先上图。

这样看起来有点单调。

我们把它加在网页上试试。

具体效果可以去我的个人网站查看http://tcxqq.top

好了，成品已经展示了接下来，开干吧！

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/music.css">
</head>
<body>
<audio src="" id="mymusic"></audio>
<div class="music">
 <div class="pic_div"> <img src="images/music/pictures/disc.png" alt="" class="disc"> <img src="images/music/pictures/default.jpg" alt="" id="music_pic"> <span class="dot"></span>
 <div class="music_program">
 <div id="prograss"></div>
 </div>
 <div class="time">
 <p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p>
 </div>
 <div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
 </div>
</div>
</body>
<script src="js/music.js"></script>
</html>

先建好基本的HTML框架。

<audio src="" id="mymusic"></audio>为我们的音频
<div class="music">...</div>里面的部分为音乐的控件以及进度条，图片等。
<img src="images/music/pictures/disc.png" alt="" class="disc">为旋转的碟片
<img src="images/music/pictures/default.jpg" alt="" id="music_pic">为音乐专辑图片
<span class="dot"></span>为碟片中间的小圆点
<div class="music_program"><div id="prograss"></div></div>
我们通过DIV嵌套一个div来作为音乐的进度条（图片红色部分），第一个div固定宽度，第二个div用%来设置宽度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 为时间显示播放时长和总时长
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
控制菜单按钮上一曲播放/暂停下一曲

下面是具体的css代码

@charset "utf-8";
/* CSS Document */
.music {
 height: 150px;
 width: 150px;
 background:rgba(98,91,91,0.9);
}
.pic_div {
 position: relative;
}
.dot {
 width: 15px;
 height: 15px;
 background: #464545;
 position: absolute;
 border: 2px solid white;
 border-radius: 50%;
 top: 40px;
 left: 85px;
}
.disc {
 width: 100px;
 position: absolute;
 right: 5px;
 transform: rotate(30deg);
}
#music_pic {
 width: 100px;
 position: absolute;
}
.music_program {
 height: 2px;
 width: 100px;
 background: #555;
 position: relative;
 top: 100px;
}
.music_program div {
 height: 100%;
 width: 0%;
 background: red;
}
.time {
 width: 100px;
 height: 20px;
 position: relative;
 top: 85px;
 overflow: hide;
}
.time p {
 padding-left: 33px;
}
.time p span:nth-of-type(2) {
 padding: 0 5px;
}
.music_menu {
 width: 150px;
 height: 25px;
 position: relative;
 top: 85px;
}
.music_menu span {
 width: 30px;
 height: 25px;
 display: inline-block;
 cursor: pointer;
}
.music_menu span:nth-of-type(1) {
 margin-left: 8px;
 background: url(../images/music/pictures/back.png) no-repeat 7px;
}
.music_menu span:nth-of-type(2) {
 margin-left: 14px;
 background: url(../images/music/pictures/play.png) no-repeat 10px;
}
.music_menu span:nth-of-type(3) {
 margin-left: 14px;
 background: url(../images/music/pictures/forward.png) no-repeat 7px;
}

至于图片资源的话，博主是在站长素材下载的

链接🔗http://sc.chinaz.com/psd/130622574580.htm

接下来是最重要的Js部分！

// JavaScript Document
var music=document.getElementById("mymusic");
 var prograss=document.getElementById("prograss");
 var curtxt=document.getElementById("currenttime");
 var duration=document.getElementById("duration");
 var music_pic=document.getElementById("music_pic");
 var deg=0;//旋转角度
 var disctimer,prograsstimer;//碟片计时器,进度条计时器
 var musicindex=0;//音乐索引
 var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音乐数组
 var music_pics=new Array("000002","000001","000001");

 //旋转碟片
 var disc=document.getElementsByClassName('disc');

 //音乐时间显示
 function curtime(txt,misic)
 {
  if(music.currentTime<10)
  {
   txt.innerHTML="0:0"+Math.floor(music.currentTime);
  }else
  if(music.currentTime<60)
  {
   txt.innerHTML="0:"+Math.floor(music.currentTime);
  }
  else
  {
   var minet=parseInt(music.currentTime/60);
   var sec=music.currentTime-minet*60;
   if(sec<10)
   {
    txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);
   }
   else
   {
    txt.innerHTML="0"+minet+":"+parseInt(sec);
   }
  }
 }

 //播放暂停
 function playPause()
 {
  var btn=document.getElementById("playbtn");
  if(music.paused)
  {
   music.play();
   clearInterval(disctimer);//清除碟片的定时器
   btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改变播放暂停键的图标
   disctimer=setInterval(function(){
   disc[0].style.transform="rotate("+deg+"deg)";
   deg+=5;

   //每秒设置进度条长度
   },100);
   prograsstimer=setInterval(function(){
   prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
   curtime(curtxt,music);
   if(music.currentTime>=music.duration-1)//片尾跳转下一曲
   {
   musicindex++;//音乐索引加一
   if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零
   {
    musicindex=0;
   }
   getMusic();
   music.play();//重载音乐后进行播放
   }
   },1000);
  }
  else
  {
   music.pause();//停止音乐
   btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";
   clearInterval(disctimer);//清除碟片滚动的定时器
   clearInterval(prograsstimer);//清除进度条的定时器
  }
 }

 //下一曲
 function nextMusic()
 {
 musicindex++;//音乐索引加一
 if(musicindex>=musics.length)//如果音乐索引超过长度，将音乐索引清零
  {
  musicindex=0;
  }
 getMusic();
 music.play();
 }

 //上一曲
 function backMusic()
 {
 musicindex--;
 if(musicindex<0)//如果索引小于0，将索引变为最大值
  {
  musicindex=musics.length-1;
  }
 getMusic();
 music.play();
 }

 //读取音乐
 function getMusic()
 {
  music.src="images/music/"+musics[musicindex];//改变音乐的SRC
  music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";
  if(music.readyState="complete")
  {
   setTimeout(function(){
   duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
   },1000);//一秒后读取音乐的总时长

  }
 }

 window.onload=function(){
  getMusic();

 }

这次博主接受批评，对代码进行了大量的注释，方便大家阅读。

So 这里就不过多介绍了，这里用的三首歌都是博主喜欢的。

由于博主的网站不支持中文！所以改成拼音了。

第一首是SHE的我曾是少年（喜欢SHE的基本都20+了吧），还有鹿先森乐队的两首。

歌曲自己喜欢什么就加什么吧！

OK，这就是一个完整的播放器了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

比较炫的图片播放器 js 焦点效果代码

图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a
(jsp/html)网页上嵌入播放器(常用播放器代码整理)

这个其实很简单,只要在HTML上添加以上代码就OK了,前提是你的电脑上已经安装了播放器,如RealPlay. 复制代码代码如下: <embed src="C:/mp3/10.19/画心.mp3" width="480" height="100"02. loop="false" autostart="false"> </embed> 还有更多的的播放器和设置可供选择: 页面插入REA
运用js教你轻松制作html音乐播放器

用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu
js的flv视频播放器插件使用方法

使用非常简单,小伙伴们只要修改对应的参数即可,这里就不多废话了,直接奉上实例吧. <div class="txt1"> <script type="text/javascript"> var swf_width=307 var swf_height=182 var texts='快乐星汉堡' var files='http://v.78.cn/kuailexing/sp.flv' </script> <!--<scri
JavaScript实现带播放列表的音乐播放器实例分享

代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
js实现的万能flv网页播放器代码

本文实例讲述了js实现的万能flv网页播放器代码.分享给大家供大家参考,具体如下: <div id="player5"><script type="text/javascript" src="swfobject.js"></script><script type="text/javascript"> var s5 = new SWFObject("FlvPlayer20
javascript 播放器控制

详细参数可查询MSDN http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/settingsobject.asp <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link href="style/style.css&quo
JS HTML5 音乐天气播放器(Ajax获取天气信息)

晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条
javascript实现简单的html5视频播放器

效果: 代码很简单 js define("html5_video_player", [ '../avalon-min'], function(avalon) { function formatTime(seconds) { var seconds = Math.round(seconds); var minutes = Math.floor(seconds / 60); seconds = Math.floor(seconds % 60); minutes = (minutes >

JavaScript实现简单音乐播放器

相关推荐

随机推荐