네이티브 JS로 뮤직 플레이어 만들기

이번에는 네이티브 JS로 뮤직 플레이어를 만드는 방법을 소개하겠습니다. 네이티브 JS로 뮤직 플레이어를 만들 때 주의사항은 무엇인가요?

이전 단어                                  최근 JS를 리뷰했는데 뮤직 플레이어가 꽤 흥미로운 것 같아요. 오늘은 가장 네이티브 JS를 사용하여 작은 뮤직 플레이어를 작성해 보겠습니다~

주요 기능:

1. 루프 및 랜덤 플레이 지원

 2. 재생 중 이미지 회전 지원

3.

진행률 표시줄

을 클릭하여 재생 위치를 조정하고 볼륨을 조정할 수 있습니다. ​ ​ 4. 음악 재생 시간 표시

5. 노래 전환 지원: 이전 노래, 다음 노래, 노래 제목을 클릭하여 노래 재생 일시 중지 등을 전환하세요.~

음악을 추가하는 방법에는 두 가지가 있습니다:

① 오디오 태그를 사용하여 음악의 주소를 배열로 저장할 수 있습니다. ②두 번째 방법은 노래가 여러 개인 경우 몇 개의 오디오 태그를 추가한 다음 모든 배경 음악을 가져오는 것입니다(예제에서는 먼저 세 곡의 음악을 추가하여 배열에 넣습니다. 물론 아무 노래나 선택할 수 있습니다.) 당신은 좋아합니다.

rreerrree

1 재생하고 일시 정지하려면 클릭하세요

가장 먼저 분명히 해야 할 것은 재생 버튼을 클릭할 때 다음이 달성되어야 한다는 것입니다: ①음악이 재생되기 시작합니다

②노래가 재생되면서 진행률 표시줄이 앞으로 이동하기 시작합니다. ③노래가 재생되면서 사진이 회전하기 시작합니다.

④재생 시간이 시작됩니다

그에 따라 재생 버튼을 다시 클릭하면 일시 중지되도록 설정할 수 있습니다.

①노래가 멈춥니다.

②진행률 표시줄을 동시에 일시 중지합니다.

③ 동시에 재생 시간을 일시 중지합니다.

④사진 회전이 멈춥니다

참고: 위의 시작 및 일시 중지 작업은 동기화되어야 합니다!

아이디어를 명확히 한 후에 하나씩 구현해보겠습니다~

재생/일시 정지를 클릭하세요

<audio id="play1">
   <source src="auto/旅行.mp3"></source>
</audio>
<audio id="play2">
   <source src="auto/薛明媛,朱贺 - 非酋.mp3"></source>
</audio>
<audio id="play3">
   <source src="auto/杨宗纬 - 越过山丘.mp3"></source>
</audio>

재생과 일시 정지는 동일한 버튼에 있으므로 위의 메소드가 호출되므로 각 기능이 어떤 기능을 구현하는지 자세히 살펴보겠습니다.

사진 회전

play1=document.getElementById("play1");
play2=document.getElementById("play2");
play3=document.getElementById("play3");
play=[play1,play2,play3];

위는 이미지 회전 기능입니다. 음악이 재생될 때,rotate() 함수를 호출하면 이미지 회전을 구현할 수 있습니다!

timer를 지우는 데 동일한 함수가 사용됩니다. 음악이 일시 중지되면 imagePause()가 호출되고 이미지 회전 타이머가 지워집니다.

 //点击播放、暂停
  function start(){
   minute=0;
    if(flag){
      imagePause();
      play[index].pause();
     }else{
      rotate();
      play[index].play();
      reducejindutiao();
      addtime();
      jindutiao();
      for (var i=0;i<play.length;i++) {
        audioall[i].style.color="white";
         }
      audioall[index].style.color="red";
     }
 }

이런식으로 이미 이미지 회전 기능을 구현해두었습니다~

진행률 표시줄

먼저 너비, 길이가 동일하고 색상이 다른 두 개의 p를 정의합니다.

current

time 속성을 사용하여 현재 재생 시간을 전달합니다. p의 초기 길이를 0으로 설정한 다음 현재 재생 이벤트를 통해 p의 길이를 조정합니다. 스크롤바 효과를 얻을 수 있습니다. rreee 이렇게 진행바가 완성됩니다~

놀이시간

음악의 재생 시간도 현재 시간을 사용하여 언제든지 변경되지만 현재 시간의 시간 단위는 초라는 점에 유의해야 합니다.

rreee

2컷 송저는 컷 송을 얻기 위해 두 가지 방법을 시도했습니다:

①이전 노래와 다음 노래 버튼을 클릭하면 노래가 전환됩니다.

//图片旋转，每30毫米旋转5度
  function rotate(){
    var deg=0;
    flag=1;
    timer=setInterval(function(){
    image.style.transform="rotate("+deg+"deg)";
      deg+=5;
       if(deg>360){
        deg=0;
        }
    },30);
 }

②노래 제목을 클릭하면 노래가 전환됩니다.

function imagePause(){
    clearInterval(timer);
    flag=0;
 }

참고: 노래를 전환할 때 진행률 표시줄을 잊지 마세요!

진행률 표시줄 스크롤 타이머를 지운 다음 p의 길이를 0으로 복원합니다.

function jindutiao(){
   //获取当前歌曲的歌长
   var lenth=play[index].duration;
    timer1=setInterval(function(){
    cur=play[index].currentTime;//获取当前的播放时间
     fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
      },50)
}

그러는 동안 음악이 멈춥니다.

//播放时间
   function addtime(){
      timer2=setInterval(function(){
       cur=parseInt(play[index].currentTime);//秒数
        var temp=cur;
       minute=parseInt(temp/60);
       if(cur%60<10){
       time.innerHTML=""+minute+":0"+cur%60+"";
        }else{
            time.innerHTML=""+minute+":"+cur%60+"";
         }
      },1000);
}

모든 타이머 지우기:

 function qingkong(){//清空所有的计时器
    imagePause();
    clearInterval(timer2);
 }

3点击进度条调整播放进度及音量

首先应该理清一下逻辑：当点击进度条的时候，滚动条的宽度应该跟鼠标的offsetX一样长，然后根据进度条的长度来调整听该显示的时间。

(1) 给滚动条的p添加一个事件，当滚动条长度变化的时候歌曲的当前播放的时间调整，300是滚动条的总长度；

//调整播放进度
 function adjust(e){
   var bar=e.target;
   var x=e.offsetX;
   var lenth=play[index].duration;
   fillbar.style.width=x+"px";
   play[index].currentTime=""+parseInt(x*lenth/300)+"";
   play[index].play();
}

(2) 改变音量的滚动条，跟改变播放时间类似，利用volume属性（值为零到一）；

 //调整音量大小
  function changeVolume(e){
    var x=e.offsetX+20;
    play[index].volume=parseFloat(x/200)*1;
    //改变按钮的位置
     volume3.style.left=""+x+"px";
}

4随机、循环播放

循环播放音乐的时候，直接index++当index的范围超过歌曲的长度的时候，index=0重新开始。随机播放的函数类似，当歌曲播放完毕的时候，随机产生一个0到play.length的数字就可以了。

 //随机播放歌曲
  function suiji(e){
          var img=e.target;
          img2.style.border="";
          img.style.border="1px solid red";
        }
        //顺序播放
        function shunxu(e){
          var img=e.target;
          img1.style.border="";
          img.style.border="1px solid red";
          clearInterval(suijiplay);
          shunxuplay=setInterval(function(){
            if(play[index].ended){
              add();
            }
          },1000);
        }

这样我们整个音乐播放器就完成了，大家可以自己写一个好看的界面，就更完美了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue中computed属性的使用方法

ajax与跨域jsonp

用requireJS添加返回顶部功能

위 내용은 네이티브 JS로 뮤직 플레이어 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!