HTML5网页页面歌曲播发器的示例编码

日期:2021-02-27 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

本文详细介绍了HTML5网页页面歌曲播发器的示例编码,共享给大伙儿,实际以下:

1作用详细介绍

HTML5中推出了音视頻标识,可让大家不依靠别的软件便可以立即播发音视頻。下面大家就运用H5的audio标识及其有关特性和方式来制做1个简易的歌曲播发器。关键包含下列几个作用:

1、播发中止、上1首和下1首

2、调剂声音和播发进度条

3、依据目录切换当今音乐

先看来1下最后的进行实际效果:

这个歌曲播发器的构造关键分成3一部分:音乐信息内容、播发器和播发目录,大家关键详细介绍1下播发器一部分。最先在播发器中放3个audio标识用于播发:

<audio id="music1">访问器不适用audio标识
<source  src="media/Beyond - 辉煌时光.mp3"></source>
</audio>
<audio id="music2">访问器不适用audio标识
<source  src="media/Daniel Powter - Free Loop.mp3"></source>
</audio>
<audio id="music3">访问器不适用audio标识
<source  src="media/周杰伦、费玉清 - 千里以外.mp3"></source>
</audio>

下面的播发目录也对应3个audio标识:

<div id="playList">
    <ul>
        <li id="m0">Beyond-辉煌时光</li>
        <li id="m1">Daniel Powter-Free Loop</li>
        <li id="m2">周杰伦、费玉清-千里以外</li>
    </ul>
</div>

接下来大家就刚开始逐渐完成上面提到的作用吧,先来进行播发和中止作用,在按下播发按钮时大家要保证进度条随音乐进度前行,播发時间也慢慢提升,另外播发按钮变为中止按钮,播发目录的款式也对应更改。

在做作用以前大家要先把3个audio标识获得id后存到1个数字能量数组中,供后续应用。

var music1= document.getElementById("music1");
var music2= document.getElementById("music2");
var music3= document.getElementById("music3");
var mList = [music1,music2,music3];

2播发和中止:

大家如今便可以进行播发按钮的作用啦,最先设定1个标示,用来标识歌曲的播发情况,再为数字能量数组的数据库索引index设定1个默认设置值:

随后对播发情况开展分辨,启用对应的涵数,并改动flag的值和目录对应新项目款式:

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)";
}
}

上面的编码中启用了好几个涵数,在其中播发和中止是audio标识自带的方式,而别的的涵数则是大家自身界定的。下面大家就看来1下这些涵数是如何完成的,又对应了哪些作用吧。

3进度条和播发時间:

 最先是进度条作用,获得音乐的所有时长,随后再依据当今播发的进度与进度条总长度相乘测算出进度条的部位。

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)
}

下面是更改播发時间作用,这里大家设定1个定时执行涵数,每隔1段時间来实行1次以更改播发時间。由于大家获得到的音乐时长是以秒来测算,因此大家要运用if句子对时长分辨来开展换算,将播发時间改成以几分几秒的方式来显示信息。

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);
}

4调剂播发进度和声音:

接下来大家再来进行1下根据进度条调剂播发进度和调剂声音作用。

调剂播发进度作用运用了event目标来完成,由于offsetX特性仅有IE恶性事件具备,因此强烈推荐应用IE访问器查询实际效果。先对进度条加上恶性事件监视,当在进度条上点一下电脑鼠标时,获得电脑鼠标的部位,并依据部位除以进度条的总长度来测算当今的播发进度,随后对音乐开展设定。

//调剂播发进度
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";
}
})

下面是调剂声音作用,声音的调剂大家选用拖拽的方式完成,思路也是对声音条的按钮球加上恶性事件监视,随后依据拖拽的部位来测算按钮球相对声音条总体的部位,最终依据测算結果与声音相乘得出当今声音:

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(mousePos2<0){
            mousePos2 = 0;
}
if(mousePos2>maxValue2){
            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音乐切换

 最终大家再来完成较为繁杂的音乐切换作用。

先看来用上1首和下1首按钮开展切换,在切换歌曲时大家要留意的难题有下面几个:第1,大家要终止当今播发的歌曲,转而播发下1首歌曲;第2,要清空进度条和播发時间,再次测算;第3,音乐信息内容要随之更改,播发器下面的播发目录款式也要转变。在搞清楚上面3点之后大家便可以刚开始完成作用了。

//上1曲
function prevM(){
clearInterval(timer1);
clearInterval(timer2);
stopM();
qingkong();
cleanProgress();
--index;
if(index==⑴){
        index=mList.length⑴;
}
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)";
}
} 
//下1曲
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();
}

根据播发目录来切换音乐与根据按钮切换的思路类似,只是依据对应的目录项来设定当今应当播发哪首音乐。

上面切换音乐的涵数中都启用了几个方式,下面大家看来看这些方式的主要用途全是甚么吧。

最先是切换音乐信息内容:

function changeInfo(index){
if (index==0) {
    musicName.innerHTML = "辉煌时光";
    singer.innerHTML = "Beyond";
}
if (index==1) {
    musicName.innerHTML = "Free Loop";
    singer.innerHTML = "Daniel Powter";
}
if (index==2) {
    musicName.innerHTML = "千里以外";
    singer.innerHTML = "周杰伦、费玉清";
}
} 

随后清空两个定时执行器:

//将进度条置0
function cleanProgress(timer1){
if(timer1!=undefined){
    clearInterval(timer1);
}
progress.style.width="0";
progressBtn.style.left="60px";
} 
function qingkong(timer2){ 
if(timer2!=undefined){
    clearInterval(timer2);
}
}

再把播发的歌曲终止,而且将播发時间修复。

function stopM(){
if(mList[index].played){
    mList[index].pause();
    mList[index].currentTime=0;
    flag=false;
}
}

最终的最终,更改下面播发目录的款式:

function clearListBgc(){
document.getElementById("m0").style.backgroundColor = "#E5E5E5";
document.getElementById("m1").style.backgroundColor = "#E5E5E5";
document.getElementById("m2").style.backgroundColor = "#E5E5E5";
document.getElementById("m0").style.color = "black";
document.getElementById("m1").style.color = "black";
document.getElementById("m2").style.color = "black";
}

到此,歌曲播发器大家就基础进行了,看来1下动图的实际效果:

作者:杰瑞文化教育
出处:http://www.cnblogs.com/jerehedu/ 

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:html5订制表单 返回下一篇:没有了