如何用JavaScript编写一个支持长尾关键词搜索的音乐播放器？

本文共计1194个文字，预计阅读时间需要5分钟。

原文：本文字例为大家分享了JavaScript实现音乐播放器的具体代码，供大家参考。具体内容如下：

效果：HTML代码 div class=play

改写后：本例展示了如何用JavaScript编写音乐播放器代码，以下为参考内容：

效果：HTML代码 div

本文实例为大家分享了JavaScript实现音乐播放器的具体代码，供大家参考，具体内容如下

效果

HTML代码

<!--播放器--> <div id="player">     <!--播放控件-->     <div id="playerControl">         <div class="playerImg">             <img src="../images/demo3/1.jpg" alt="" width="150" height="150">             <audio id="audio">                 <source src="../video/1.mp3">             </audio>         </div>         <div id="pcontrol" class="clearfix">             <button class="prev" title="上一曲"></button>             <button id="play" class="play1" title="播放"></button>             <button class="next" title="下一曲"></button>             <button class="stop" title="停止"></button>         </div>     </div>     <!--播放进度-->     <div id="progrees">         <div id="curProgrees"></div>     </div>     <!--播放时间-->     <div id="playTime">         <span id="presentTime">00 : 00</span>         <span>/</span>         <span id="totalTime">00 : 00</span>     </div>     <!--音频列表-->     <div id="playerList">         <ul>             <li class="active">                 <span class="mr10">1</span>                 <span>Mascara</span>                 <span>-</span>                 <span>G.E.M. 邓紫棋</span>             </li>             <li>                 <span class="mr10">2</span>                 <span>西安人的歌</span>                 <span>-</span>                 <span>范炜与程渤智</span>             </li>             <li>                 <span class="mr10">3</span>                 <span>往后余生</span>                 <span>-</span>                 <span>李贰叁</span>             </li>         </ul>     </div> </div>

Css代码

*{margin:0; padding:0;} .bd{border:1px solid red;} .fl{float: left} .fr{float:right} .mr10{margin-right:10px;} ul{list-style: none;} .clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;} body{background:#262626; padding:50px 0; color:#fff; }   #player{width:600px; height:400px; background:#130519de;margin:0 auto;} #playerControl{position:relative;height:200px;} #playerControl .playerImg{padding:25px; box-sizing: border-box;}   /*播放控制界面*/ #pcontrol{position: absolute;left:300px; top:85px;} #pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/player.png") no-repeat}   /*暂停*/ #pcontrol .play1{background-position: -8px -8px} #pcontrol .play1:hover{background-position: -49px -8px}   /*播放*/ #pcontrol .play2{background-position: -8px -49px} #pcontrol .play2:hover{background-position: -49px -49px}   /*上一曲*/ #pcontrol .prev{background-position: 0 -112px} #pcontrol .prev:hover{background-position: -30px -112px}   /*下一曲*/ #pcontrol .next{background-position: 0 -141px} #pcontrol .next:hover{background-position: -30px -141px} /*停止播放*/ #pcontrol .stop{background-position: 0 -84px} #pcontrol .stop:hover{background-position: -30px -84px}   /*播放列表*/ #playerList{padding:20px 0px} #playerList ul li{padding:10px 20px; } #playerList ul li.active,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer}   /*播放进度*/ #progrees{width:550px; height:5px; background:#ccc; margin:0 auto;} #curProgrees{width:0px; height:100%; background:darkolivegreen;}   /*播放时间*/ #playTime{padding:10px 25px 0px; text-align: right;}

Js功能代码

window.onload = function (ev) {     //获取元素         var play = document.querySelector("#play");//播放按钮         var audio = document.querySelector("#audio");//音频文件         var next = document.querySelector(".next");//下一曲         var prev = document.querySelector(".prev");//上一曲         var stop = document.querySelector(".stop");//停止         var playerListLi = playerList.querySelectorAll("li")//播放列表li         var totalTime = document.querySelector("#totalTime");//总时间         var presentTime = document.querySelector("#presentTime");//当前时间       //歌曲地址         var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"];       //1. 点击播放歌曲，再次点击播放暂停         play.addEventListener("click",startPlay);     //2.点击切换下一曲         next.addEventListener("click",theNext);     //3.点击切换上一曲         prev.addEventListener("click",thePrev);     //4.点击停止播放         stop.addEventListener("click",stopPlay);           //定义播放函数         //1.1 定义标杆，判断是否播放歌曲         var flag = true;         function startPlay(){             if(flag){                 play.className="play2";                 play.title = "暂停";                 audio.play();                 //播放进度                 playProgress();                 //播放时间                 playTime();             }else{                 play.className="play1";                 play.title = "播放";                 audio.pause();             }             flag = !flag;         }     //定义下一曲         var n = 0;//定义歌曲索引         function theNext(){             n++;             if(n == playerMusic.length){                 n = 0;             }             audio.src = playerMusic[n];             //歌曲播放             flag = true;             startPlay();             //切换列表             switchList();         }     //定义下一曲         function thePrev(){             n--;             if(n < 0){                 n = playerMusic.length - 1;             }             audio.src = playerMusic[n];             //歌曲播放             flag = true;             startPlay();             //切换列表             switchList();         }     //切换列表         function switchList(){             for(var i=0; i<playerListLi.length; i++){                 playerListLi[i].className = "";             }             playerListLi[n].className = "active";         }     //停止播放         function stopPlay(){             //设置当前播放时间为0;,并暂停播放             audio.currentTime = 0;             flag = false;             startPlay();         }       //播放进度         function playProgress(){             //定义计时器             var timer = null;             if(flag){                 //开启计时器                 timer = setInterval(function(){                     if(audio.currentTime >= audio.duration){                         curProgrees.style.width = progrees.offsetWidth + "px";                         clearInterval(timer);                         theNext();                     }else{                         curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px";                     }                   },30);             }else{                 //关闭计时器                 clearInterval(timer);             }           }     //播放时间         function playTime(){             //当前时间             var timer2 = null;             if(flag){                 timer2 = setInterval(function(){                     //总时间                     setTime(audio.duration,totalTime);                     setTime(audio.currentTime,presentTime);                 },1000)             }else{                 clearInterval(timer2)             }         }     //设置时间         function setTime(audioTime,obj){             //总时间             allMinute = Math.floor(audioTime/60);             if(allMinute<10){                 allMinute = "0" + allMinute;             }             allSecond = Math.floor(audioTime%60);             if(allSecond<10){                 allSecond = "0" + allSecond;             }             var allTime = allMinute + " : " + allSecond;             obj.innerHTML = allTime;         } }

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