HTML5를 사용하여 웹 뮤직 플레이어 구현-H5 튜토리얼-php.cn

이 글은 주로 HTML5 웹 뮤직 플레이어의 샘플 코드를 소개하고 있습니다. 내용이 꽤 좋아서 참고용으로 올려드리겠습니다.

이 글에서는 HTML5 웹 뮤직 플레이어의 샘플 코드를 소개하고, 자세한 내용은 다음과 같습니다.

1 기능 소개

HTML5에서는 오디오 및 비디오 태그를 도입하여 별도의 작업 없이 바로 음악을 재생할 수 있습니다. 다른 플러그인을 사용하는 방법. 다음으로 H5의 오디오 태그와 관련 속성 및 메서드를 사용하여 간단한 음악 플레이어를 만듭니다. 주로 다음 기능이 포함되어 있습니다:

1. 일시 정지, 이전 노래 및 다음 노래 재생

2. 볼륨 및 재생 진행률 표시줄 조정

3. 목록에 따라 현재 노래 전환

최종 내용을 살펴보겠습니다. 효과 우선 :

이 뮤직 플레이어의 구조는 크게 노래 정보, 플레이어, 재생 목록의 세 부분으로 나뉩니다. 먼저 재생을 위해 플레이어에 세 개의 오디오 태그를 넣습니다.

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

로그인 후 복사

다음 재생 목록도 세 개의 오디오 태그에 해당합니다.

<p id="playList">
    <ul>
        <li id="m0">Beyond-光辉岁月</li>
        <li id="m1">Daniel Powter-Free Loop</li>
        <li id="m2">周杰伦、费玉清-千里之外</li>
    </ul>
</p>

로그인 후 복사

다음으로 위에서 언급한 기능을 점진적으로 구현하기 시작합니다. 일시 정지 기능을 사용하려면 재생 버튼을 누르면 노래 진행에 따라 진행률 표시줄이 앞으로 나아가고 동시에 재생 버튼이 일시 정지 버튼으로 바뀌며 스타일도 달라집니다. 이에 따라 재생 목록도 변경됩니다.

기능을 수행하기 전에 세 개의 오디오 태그 ID를 가져와서 나중에 사용할 수 있도록 배열에 저장해야 합니다.

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

로그인 후 복사

2 재생 및 일시 중지:

이제 재생 버튼의 기능을 완료할 수 있습니다. 먼저 음악의 재생 상태를 표시하는 플래그를 설정한 다음 배열 인덱스에 대한 기본값을 설정합니다.

그런 다음 재생 상태를 확인하고 해당 함수를 호출하고 플래그 값과 목록의 해당 항목 스타일을 수정합니다.

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

로그인 후 복사

위 코드에서는 여러 함수가 호출되며 그 중 재생 및 일시 중지와 함께 제공되는 메서드가 있습니다. 오디오 태그이고 다른 기능은 스스로 정의합니다. 이러한 기능이 어떻게 구현되어 있는지, 어떤 기능에 해당하는지 살펴보겠습니다.

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

로그인 후 복사

다음은 재생 시간을 변경하는 기능입니다. 여기서는 타이밍 기능을 설정하고 가끔씩 실행하여 재생 시간을 변경합니다. 우리가 얻은 노래 길이는 초 단위로 계산되므로 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 재생 진행률 및 볼륨 조정:

다음으로 진행률 표시줄을 통해 재생 진행률을 조정하고 볼륨을 조정하는 기능을 완료하겠습니다.

재생 진행률 조정 기능은 이벤트 개체를 사용하여 구현됩니다. 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곡 전환

마지막으로 더 복잡한 노래 전환 기능을 구현하겠습니다.

먼저 전환을 위해 이전 버튼과 다음 버튼을 사용하는 방법을 살펴보겠습니다. 음악을 전환할 때 주의해야 할 몇 가지 문제가 있습니다. 첫째, 현재 재생 중인 음악을 중지하고 다음 음악으로 전환해야 합니다. 막대와 재생 시간을 지우고 다시 계산해야 합니다. 셋째, 노래 정보가 그에 따라 변경되어야 하며 플레이어 아래의 재생 목록 스타일도 변경되어야 합니다. 위의 세 가지 사항을 파악한 후 기능 구현을 시작할 수 있습니다.

//上一曲
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();
}

로그인 후 복사

재생목록을 통해 노래를 전환한다는 아이디어는 버튼을 통해 전환하는 것과 유사합니다. 해당 목록 항목에 따라 현재 재생해야 할 노래를 설정하는 것뿐입니다.

위의 노래 전환 기능에는 여러 가지 메서드가 호출됩니다. 이러한 메서드의 용도를 살펴보겠습니다.

먼저 노래 정보를 전환하세요:

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

로그인 후 복사

이제 기본적으로 뮤직 플레이어가 완성되었습니다. 애니메이션 효과를 살펴보겠습니다.