- Beyond-光辉岁月
- Daniel Powter-Free Loop
- 周杰伦、费玉清-千里之外
现在科技真是日新月异，听歌都不用带CD机啦,手机就能帮你解决。下面就跟大家分享一下如何通过编程来控制手机音乐播放器，比如开始播放某首歌、暂停一下、换个曲子或是调整一下声音大小等功能，掌握了这些技巧，我们听歌的时候就更加方便舒心，生活品质也就跟着提高！
1.准备工作
var music1= document.getElementById("music1");
var music2= document.getElementById("music2");
var music3= document.getElementById("music3");
var mList = [music1,music2,music3];
搞定音乐播放器的关键是做好准备工作！要先找齐网页中的音频标签，统一放在一个列表中。这样的话，你就可以随心所欲地控制歌曲咯~
function playMusic(){
if(flag&&mList[index].paused){
mList[index].play();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
progressBar();
playTimes();
play.style.backgroundImage = "url(media/pause.png)";
flag = false;
}else{
mList[index].pause();
flag = true;
play.style.backgroundImage = "url(media/play.png)";
}
}
下一步操作很简单，设定个标志标明正在播什么曲子，再给数组里每个位置设个初始值。有了这个小技巧，处理音乐时就可以弄清楚当前播放的歌曲名和进度
2.播放和暂停功能
这个歌曲播不播，暂停不暂停，是我们用音乐播放器必不可少的小操作！按当前曲子情况，选播放或暂停就是了。还能在按钮旁弄个好认的图，让别人知道我们现在在听啥歌~
function progressBar(){
var lenth=mList[index].duration;
timer1=setInterval(function(){
cur=mList[index].currentTime;//获取当前的播放时间
progress.style.width=""+parseFloat(cur/lenth)*300+"px";
progressBtn.style.left= 60+parseFloat(cur/lenth)*300+"px";
},10)
}
这个程序就是用audio标签本身带有的放歌停歌曲目和我们自己写的一些小函数互相配合，实现音乐播放器这种操作的！
function playTimes(){
timer2=setInterval(function(){
cur=parseInt(mList[index].currentTime);//秒数
var minute=parseInt(cur/60);
if (minute<10) {
if(cur%60<10){
playTime.innerHTML="0"+minute+":0"+cur%60+"";
}else{
playTime.innerHTML="0"+minute+":"+cur%60+"";
}
} else{
if(cur%60<10){
playTime.innerText= minute+":0"+cur%60+"";
}else{
playTime.innerText= minute+":"+cur%60+"";
}
}
},1000);
}
3.进度条和播放时间
你知道吗？进度条和计时器在听歌软件里可是很重要的！比如将整首歌的时间除以现在听到的歌曲速度，然后算出应该在哪个地方停下来就行，这样用户就能轻松地知道自己刚才听到了哪部分内容。
别忘了看看你的播放器，直接就能看到每首歌听得多少时间。把总时间拼成实际的钟点（比如分几分钟，还有几分几秒），好像就真的跟上音乐节奏咯~
//调整播放进度
total.addEventListener("click",function(event){
var e = event || window.event;
document.onmousedown = function(event){
var e = event || window.event;
var mousePos1 = e.offsetX;
var maxValue1 = total.scrollWidth;
mList[index].currentTime = (mousePos1/300)*mList[index].duration;
progress.style.width = mousePos1+"px";
progressBtn.style.left = 60+ mousePos1 +"px";
}
})
4.调整播放进度和音量
播放暂停搞定了？别急，进度条也要能调歌速。再看看那几块儿音量调节的小小块，对，必须搞定它们，大家才能玩得痛快！
volBtn.addEventListener("mousedown",function(event){
var e = event || window.event;
var that =this;
//阻止球的默认拖拽事件
e.preventDefault();
document.onmousemove = function(event){
var e = event || window.event;
var mousePos2 = e.offsetY;
var maxValue2 = vol.scrollHeight;
if(mousePos2maxValue2){
mousePos2=maxValue2;
}
mList[index].volume = (1-mousePos2/maxValue2);
console.log(mList[index].volume);
volBtn.style.top = (mousePos2)+"px";
volBar.style.height = 60-(mousePos2)+"px";
document.onmouseup = function(event){
document.onmousemove = null;
document.onmouseup = null;
}
}
})
给进度条装个小耳朵，手指点一下或滑动调整音量，立刻就能显示出来。利用这个细微的信息，咱们可以轻松搞定调节歌曲播放进度和声音大小！这下听音乐更方便了！
5.歌曲切换
说到换歌，大家都懂的，要么就直接点上一曲或下一曲换，要么就在歌单里慢慢找呗。所以，我们得把每步做到位，保证换歌流程舒舒服服。
换歌时得先停之前的歌儿，看看新歌走了多远大概花多长时间。屏幕上要显示新歌名字还有变成什么样子，大家才知道听的啥新歌。
//上一曲
function prevM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
--index;
if(index==-1){
index=mList.length-1;
}
clearListBgc();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
changeInfo(index);
mList[index].play();
progressBar();
playTimes();
if (mList[index].paused) {
play.style.backgroundImage = "url(media/play.png)";
}else{
play.style.backgroundImage = "url(media/pause.png)";
}
}
//下一曲
function nextM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
++index;
if(index==mList.length){
index=0;
}
clearListBgc();
document.getElementById("m"+index).style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
changeInfo(index);
mList[index].play();
progressBar();
playTimes();
if (mList[index].paused) {
play.style.backgroundImage = "url(media/play.png)";
}else{
play.style.backgroundImage = "url(media/pause.png)";
}
}
照着这个方法去做你会发现网站里的音乐播放器变得越来越完善了。这个功能多得惊人，绝对能把很多人都引过来用！音乐爱好者们快来试试，让我们一起沉浸在美妙的旋律中，尽情感受音乐的魅力。
m0.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
qingkong();
flag = false;
stopM();
index = 0;
pauseall();
play.style.backgroundImage = "url(media/pause.png)";
clearListBgc();
document.getElementById("m0").style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
mList[index].play();
cleanProgress();
progressBar();
changeInfo(index);
playTimes();
}
m1.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
flag = false;
qingkong();
stopM();
index = 1;
pauseall();
clearListBgc();
play.style.backgroundImage = "url(media/pause.png)";
document.getElementById("m1").style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
mList[index].play();
cleanProgress();
changeInfo(index);
progressBar();
playTimes();
}
m2.onclick = function (){
clearInterval(timer1);
clearInterval(timer2);
flag = false;
qingkong();
stopM();
index = 2;
pauseall();
play.style.backgroundImage = "url(media/pause.png)";
clearListBgc();
document.getElementById("m2").style.backgroundColor = "#A71307";
document.getElementById("m"+index).style.color = "white";
mList[index].play();
cleanProgress();
changeInfo(index);
progressBar();
playTimes();
}
。
评论0