js音乐播放以及进度条实现

66 阅读 0 评论 44 点赞

我是靠谱客的博主潇洒白羊，最近开发中收集的这篇文章主要介绍js音乐播放以及进度条实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【匹音短音频】看到、听到每一种声音-ipiyin.Com</title>
<meta name="keywords" content="匹音、匹音音乐、匹音短音频、匹音官网、mp3"/>
<meta name="description" content="匹音短音频，一个旨在帮助大众用户表达自我，记录美好生活的短音频分享平台。为用户创造丰富多样的玩法，让用户在生活中轻松快速产出优质短音频。"/>
<meta name="Description" content="欢迎来到匹音网！" />
<link rel="shortcut icon" href="img/logo.ico" type="image/x-icon"/>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
   //任何需要执行的js特效
   var Request = location.search;
var paramter = Request.substring(1, Request.length);
   bf(paramter);
   });
   var audio=null;
   var music = {
       '10':['img/play/图层 17.png','牵你的手','music/music1.mp3'],
       '11':['img/play/图层 18.png','我是一只鱼','music/music2.mp3'],
       '12':['img/play/图层 19.png','在风中','music/music16.mp3'],
       '13':['img/play/图层 20.png','我们一起..','music/music4.mp3'],
       '14':['img/play/图层 24.png','珍惜','music/music5.mp3'],
       '15':['img/play/图层 25.png','当你走后','music/music6.mp3'],
       '16':['img/play/图层 21.png','经历过失..','music/music7.mp3'],
       '17':['img/play/图层 22.png','我把自己..','music/music8.mp3'],
       '18':['img/play/图层 23.png','画卷','music/music9.mp3'],
       '19':['img/play/图层 26.png','珍惜','music/music10.mp3'],
       '22':['img/play/图层 27.png','爱。。只爱','music/music11.mp3'],
       '23':['img/play/图层 21.png','上了锁','music/music12.mp3'],
       '24':['img/play/图层 21.png','爱的机关枪','music/music13.mp3'],
       '25':['img/play/图层 21.png','温柔圈套','music/music14.mp3'],
       '26':['img/play/图层 28.png','每当下雨天','music/music15.mp3'],
       '27':['img/play/图层 21.png','执迷不悟','music/music16.mp3'],
       '28':['img/play/图层 21.png','爱情是个..','music/music17.mp3'],
       '29':['img/play/图层 21.png','打胜','music/music18.mp3'],
       '30':['img/play/图层 29.png','无尽的怀念','music/music19.mp3'],
       '31':['img/play/图层 21.png','乡村姑娘','music/music20.mp3'],
       '32':['img/play/图层 21.png','苗家跳约','music/music21.mp3'],
       '33':['img/play/图层 21.png','迎娶姑娘','music/music2.mp3'],
       '34':['img/play/图层 30.png','微笑','music/music3.mp3'],
       '35':['img/play/图层 21.png','你','music/music4.mp3'],
       '37':['img/play/图层 31.png','HANDI','music/music5.mp3'],
       'f05':['img/play/图层 32.png','传奇','music/music6.mp3'],
       'f06':['img/play/图层 33.png','帆哥','music/music7.mp3'],
       'f07':['img/play/图层 21.png','爷爷','music/music8.mp3'],
       'f08':['img/play/图层 21.png','七里香','music/music9.mp3'],
       'f09':['img/play/图层 21.png','江南乡情','music/music10.mp3'],
       'f10':['img/play/图层 21.png','游荡','music/music11.mp3'],
       'f11':['img/play/图层 21.png','《万人迷》','music/music12.mp3'],
       'f12':['img/play/图层 21.png','站台','music/music13.mp3'],
       'f13':['img/play/图层 21.png','马桑树儿..','music/music14.mp3'],
       'f14':['img/play/图层 21.png','爱你','music/music15.mp3'],
       'f15':['img/play/图层 21.png','啊，朋友..','music/music16.mp3'],
       'f16':['img/play/图层 21.png','青春','music/music17.mp3'],
       'f17':['img/play/图层 35.png','零小七','music/music18.mp3'],
       'f18':['img/play/图层 34.png','HochMob','music/music19.mp3'],
       'f19':['img/play/图层 21.png','素纸离殇','music/music20.mp3'],
       'f20':['img/play/图层 21.png','金刚葫芦娃','music/music21.mp3'],
       'f21':['img/play/图层 21.png','家国天下','music/music1.mp3'],
       'f22':['img/play/图层 21.png','自挂东南枝','music/music2.mp3'],
       'f23':['img/play/图层 21.png','编曲作品..','music/music3.mp3'],
       'f24':['img/play/图层 21.png','送到火葬..','music/music4.mp3'],
       'f25':['img/play/图层 21.png','英雄联盟..','music/music5.mp3'],
       'f26':['img/play/图层 21.png','随便说点..','music/music6.mp3'],
       'f27':['img/play/图层 21.png','如剑长生','music/music7.mp3'],
       'f28':['img/play/图层 21.png','HongLiStyle','music/music8.mp3'],
       'f29':['img/play/图层 36.png','金卓然','music/music9.mp3'],
       'f31':['img/play/图层 21.png','谢谢依','music/music10.mp3'],
       'f32':['img/play/图层 21.png','朝前宫后','music/music11.mp3'],
       'f33':['img/play/图层 21.png','Whydemo','music/music12.mp3'],
       'f34':['img/play/图层 21.png','任爱如歌..','music/music13.mp3']

       };
   function bf(paramter){
       if(null != paramter){
           var musicdir = music[paramter];
           var avatar = musicdir[0];//头像
           var name = musicdir[1];//歌名
           var avatarhtml = "<img class='avatar' src='"+musicdir[0]+"'/>";
           $("#avatar").html(avatarhtml);
           var namehtml = musicdir[1];
           $("#name").html(namehtml);
           $('#audio').attr('src', musicdir[2]);
       }

       audio = document.getElementById('audio'); //必须用原生js获取id，jquery无效
       var bfalltime = audio.duration;//播放时bai间
       var bftime = audio.currentTime;//播放进du度
       if(audio!==null){
       //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
           if(audio.paused) {
       audio.play();//audio.play();// 这个就是播放
       TimeSpan(audio);
       document.getElementById("butimg").src='img/play/pause_focus.png';
           }else{
          audio.pause();// 这个就是暂停
          document.getElementById("butimg").src='img/play/play_focus.png';
           }
       }
   }
   //以下提到的aud是音频对象
//可以通过document.getElementById("音频的ID")来获得
function TimeSpan() {//在音频播放时调用这个函数
setInterval("process()", 100);
}
//进度条主函数
function process(){
   if(audio.currentTime != audio.duration){
       var Process_Now=(audio.currentTime/audio.duration);//将Process_Now转换为整数并给它加一个px单位
       var width = document.getElementById("processall").style.width.substring(0,2);
       Process_Now = Process_Now*width+"vw";
document.getElementById("processnow").style.width=Process_Now;//改变进度条的width
document.getElementById("but").style.marginLeft=Process_Now;//改变进度条的width
var current_Time = timeFormat(audio.currentTime);//获取音频的已经播放的时间并将它转换成mm:ss的格式
var time_All = timeFormat(audio.duration);//获取音频的总时间并将它转换成mm:ss的格式
document.getElementById("songtime").innerHTML=current_Time+" | "+time_All;//将时间显示为“已播放时间 | 总时长”的形式
   }else{
       document.getElementById("but").style.marginLeft=0;//改变进度条的width
       document.getElementById("butimg").src='img/play/play_focus.png';
   }
}
//将单位为秒的的时间转换成mm:ss的形式
function timeFormat(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;
}

var mousex;//鼠标的x坐标
var mousey;//鼠标的y坐标
//其实在这个程序里只需要知道鼠标的x坐标就可以了，详见后文~

function changeProcess(){
   // *****获取鼠标的横坐标
   // *****获取div id=processall的起始坐标和终止坐标
       //获得对象相对于页面的横坐标值；id为对象的id
       var thisX = document.getElementById("processall").offsetLeft;
       //获得对象相对于页面的横坐标值；
       var thisY = document.getElementById("processall").offsetTop;
       //获得页面滚动的距离；
   //注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop为谷歌内核
       var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;

       //火狐浏览器的独特获取event方法==
       e=arguments.callee.caller.arguments[0] || window.event;
       //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值；
       mousex=e.clientX - thisX;
       //获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度；
       mousey=e.clientY - thisY+this;

   // *****将当前播放置为鼠标的位置
   var place = (mousex-100)/document.getElementById("processall").offsetWidth*audio.duration;
   //注意：上一行的mousex-100的位置表示鼠标相对进度条起始位置的长度
   audio.fastSeek(place);//将播放时间设置为鼠标所在的进度条位置上代表的时间
}

</script>
</head>
<style>
   body{
       margin:auto;
   }
   .playbt{
       width: 40px;
   height: 40px;
   border-radius: 20px;
   cursor: pointer;
   background-color: white;
   text-align: center;
   margin-top: -25px;
   }
   .avatar{
       width: 6vw;
       height: 95px;
   }
</style>
<body>
   <div>
       <img style="width: 100vw;height: 100vh;" src="img/play.png" />
   </div>
   <audio id='audio' >你的浏览器不支持喔！</audio>
   <div style="width: 100vw;height: 100px;position: absolute;bottom: 0; background-color: #000000;">
           
           <div id="avatar" style="width: 6vw;height: 95px;float: left;display: inline-block;">
               
           </div>
           
           <div style="width: 8vw;height: 95px;display: inline-block;float: left;color: #DE99BC;font-size: 0.8vw;margin-left: 2vw;">
               <div id="name" style="padding-top: 20px;padding-left: 3vw;text-align: center;"></div>
               <div id="songtime" style="padding-top: 20px;padding-left: 2vw;">00:00 | 00:00</div>
           </div>
           
           <div style="float: left;width: 60vw;height: 95px;margin-left: 1vw;">
               
               <div id="processall" style="width: 75vw;height: 10px;border-radius: 20px;overflow: hidden;background-color: #ccc;margin-top: 50px;" >
                   
                   <div id="processnow" style="height: 12px;background-color: red;width: 0vw;">
                   </div>
               </div>
               
               <div id="but" class="playbt" οnclick="bf()" >
                   <img id="butimg" style="margin-top: 8px;" src="img/play/play_focus.png" />
               </div>
           </div>

   </div>
</body>
</html>