音樂吧 - www.n378blcu.icu

 找回密碼
 注冊

掃一掃,訪問微社區

QQ登錄

只需一步,快速開始

查看: 387|回復: 0

音樂播放器js制作簡單代碼

[復制鏈接]

1017

主題

1028

帖子

9240

積分

管理員

Rank: 9Rank: 9Rank: 9

音樂幣
102
貢獻
519
金錢
3369
威望
2111
相冊
1

推廣達人宣傳達人突出貢獻榮譽管理最佳新人活躍會員

QQ
跳轉到指定樓層
樓主
發表于 2017-11-7 23:53:32 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

馬上注冊,結交更多好友,享用更多功能,讓你輕松玩轉社區。

您需要 登錄 才可以下載或查看,沒有帳號?注冊

x
1、向瀏覽器中添加背景音樂:

首先應該向網頁中添加幾首好聽的背景音樂。添加音樂有,兩種方式可以用一個audo標簽,這樣應該把音樂的地址存放到一個數組中,第二種方式是,有幾首歌就添加幾個audo標簽,然后獲取所有的北京音樂(先添加三首音樂,放到一個數組中)

  1. play1=document.getElementById("play1");
  2. play2=document.getElementById("play2");
  3. play3=document.getElementById("play3");
  4. play=[play1,play2,play3];
復制代碼

1、播放音樂的時候圖片驚醒旋轉

2、播放音樂的時候滾動條滾動

3、播放音樂的時候是事件隨著背景音樂的播放時間增加

圖片轉動的函數,當音樂播放的時候調用rotate()函數

  1. functionrotate(){
  2.         vardeg=0;
  3.         flag=1;
  4.         timer=setInterval(function(){
  5.           image.style.transform="rotate("+deg+"deg)";
  6.           deg+=5;
  7.           if(deg>360){
  8.            deg=0;
  9.           }
  10.         },30);
  11.       }
復制代碼

清除定時器的函數,當音樂暫停的時候調用imagePause(),圖片旋轉的定時器被清除掉

  1. functionimagePause(){
  2.        clearInterval(timer);
  3.        flag=0;
  4.      }
復制代碼

2:先定義兩個寬度長度大小一樣顏色不同的兩個div,利用currenttime屬性來過去當前的播放的時間,設一個div一開始的長度為零,然后通過當前播放的事件來調整div長度大小就能實現滾動條的效果了。

  1. functionjindutiao(){
  2.         //獲取當前歌曲的歌長
  3.         varlenth=play[index].duration;
  4.         timer1=setInterval(function(){
  5.           cur=play[index].currentTime;//獲取當前的播放時間
  6.           fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
  7.         },50)
  8.       }
復制代碼

將進度條滾動的定時器清除掉,然后div的長度還原為0;

  1. function reducejindutiao(){
  2.          clearInterval(timer1);
  3.          fillbar.style.width="0";
  4.        }
復制代碼

3,背景音樂的播放時間也是利用currenttime來隨時改變,不過應該注意currenttime的計時單位為秒

  1. function addtime(){
  2.          timer2=setInterval(function(){
  3.            cur=parseInt(play[index].currentTime);//秒數
  4.            vartemp=cur;
  5.            minute=parseInt(temp/60);
  6.            if(cur%60<10){
  7.             time.innerHTML=""+minute+":0"+cur%60+"";
  8.            }else{
  9.             time.innerHTML=""+minute+":"+cur%60+"";
  10.            }
  11.          },1000);
  12.        }
復制代碼

二、實現通過進度條來調整歌曲的播放位置:

首先應該理清一下邏輯:當點擊進度條的時候,滾動條的寬度應該跟鼠標的offsetX一樣長,然后根據進度條的長度來調整聽該顯示的時間

(1) 給滾動條的div添加一個事件,當滾動條長度變化的時候歌曲的當前播放的時間調整,300是滾動條的總長度

  1. function adjust(e){
  2.       var bar=e.target;
  3.       var x=e.offsetX;
  4.       varlenth=play[index].duration;
  5.       fillbar.style.width=x+"px";
  6.       play[index].currentTime=""+parseInt(x*lenth/300)+"";
  7.       play[index].play();
  8.     }
復制代碼

(2) 改變聲音大小的滾動條,跟改變播放時間類似,利用volume屬性(值為零到一)

  1. function changeVolume(e){
  2.          var x=e.offsetX+20;
  3.          play[index].volume=parseFloat(x/200)*1;
  4.          //改變按鈕的位置
  5.          volume3.style.left=""+x+"px";
  6.        }
復制代碼

(3)隨機跟順序播放音樂

順序播放音樂的時候,直接index++當index的范圍超過歌曲的長度的時候,index=0重新開始。隨機播放的函數類似,當歌曲播放完畢的時候,隨機產生一個0到play.length的數字就可以了

  1. unctionshunxu(e){
  2.          var img=e.target;
  3.          img1.style.border="";
  4.          img.style.border="1pxsolid red";
  5.          clearInterval(suijiplay);
  6.          shunxuplay=setInterval(function(){
  7.            if(play[index].ended){
  8.              add();
  9.            }
  10.          },1000);
  11.        }
復制代碼

您需要登錄后才可以回帖 登錄 | 注冊

本版積分規則

QQ|小黑屋|手機版|Archiver|版權聲明|音樂吧 1327.net ( 桂IPC 網站備案中... )

GMT+8, 2020-2-17 16:06 , Processed in 0.032655 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2017 1327.Net Inc.

快速回復 返回頂部 返回列表
网络抢庄牛牛是真人玩的吗