H5音樂播放器

時間 2019-11-10

標籤 h5 音樂播放简体版

原文原文鏈接

前段時間無聊用JavaScript基於H5的audio寫一個音樂播放器。誤噴，技術有限，文筆很差之處但願各位大神海涵。html

一、HTML代碼：數組

<div id="music" class="music">
    <div id="lyric_div">
        <div id="lyric_tit"></div>
        <div id="lyric_con">
            <div id="lyric_txt">
                <p>演唱者：xxx</p>
                <p>編輯：果果</p>
                <p>qq：123456789</p>
            </div>
        </div>
    </div>
    <div id="progress">
        <div id="time_update">
            <time>00:00</time>
        </div>
        <div id="progress_bar">
            <div id="progress_cube"></div>
        </div>
        <div id="time_all">
            <time>00:00</time>
        </div>
    </div>
    <div id="bt_div">
        <input type="button" value="上一首" id="up_song">
        <input type="button" value="播放" id="play_stop">
        <input type="button" value="下一首" id="next_song">
        <audio id="audio" src="song/趙照-你就是我最想要的丫頭.mp3"></audio>
    </div>
</div>
<p id="p"></p>

二、JavaScprit代碼附上帶時間軸的歌曲的歌詞的查找地址 http://www.cnlyric.com ，至於音頻去QQ音樂下載就行了！！：測試

//http://www.cnlyric.com  帶時間軸的歌曲的歌詞的查找地址
var lyric = [{'name':'你就是我最想要的丫頭','img':'','audio_src':'song/趙照-你就是我最想要的丫頭.mp3','content':'[00:00.00] 你就是我最想要的丫頭[00:04.00] 演唱：趙照[00:08.00] 歌詞編輯：果果[00:12.00] QQ:190567797[00:16.00] zhangxiang[00:22.38] 微風輕輕吹着你散開的發[00:26.55] 忍不住想對你說內心的話[00:30.81] 多少次鼓起勇氣話又難開口[00:35.38] 想一想你的溫柔老是低着頭[00:39.72] 多但願天邊晚霞一直燃燒[00:44.33] 永遠燦爛別落下[00:48.50] 你淺笑的臉微閉的雙眼[00:53.18] 我陷入了深深的迷戀[00:59.82] 有沒有最純真的童[01:04.17] 你就是我快樂的源頭[01:08.81] 爲你傷心 爲你憂愁[01:13.26] 你就是我最想要的丫頭[01:17.51] 有沒有最幸福的生活[01:21.87] 你就是我甜蜜的擁有[01:26.59] 爲你祈禱 爲你逗留[01:30.95] 你就是我最想要的丫頭[01:53.69] 微風輕輕吹着你散開的發[01:57.78] 忍不住想對你說內心的話[02:01.96] 多少次鼓起勇氣話又難開口[02:06.59] 想一想你的溫柔老是低着頭[02:10.93] 多但願天邊晚霞一直燃燒[02:15.51] 永遠燦爛別落下[02:19.80] 你淺笑的臉微閉的雙眼[02:24.49] 我陷入了深深的迷戀[02:31.06] 有沒有最純真的童話[02:35.33] 你就是我快樂的源頭[02:39.88] 爲你傷心 爲你憂愁[02:44.58] 你就是我最想要的丫頭[02:48.62] 有沒有最幸福的生活[02:53.22] 你就是我甜蜜的擁有[02:57.86] 爲你祈禱 爲你逗留[03:02.34] 你就是我最想要的丫頭[03:06.88] 有沒有最美麗的圖畫[03:11.06] 你站在夕陽下面揮着手[03:15.68] 爲你傷心 爲你憂愁[03:19.90] 你就是我最想要的丫頭[03:24.12] 有沒有最美好的生活[03:28.65] 我願這樣陪你到永久[03:33.42] 你的善良 你的溫柔[03:37.74] 你就是我最想要的丫頭[03:42.78] 你就是我最想要的丫頭[03:46.84] 你就是我最想要的丫頭'}
,{'name':"笑忘書",'img':'img/photo1.jpg','audio_src':'song/王菲-笑忘書.mp3','content':'[00:00.00][00:01.00]笑忘書(國)[00:03.00]王菲[00:05.00][00:12.00]沒 沒有蠟燭 就不用勉強慶祝[00:17.00]沒 沒想到答案 就不用尋找題目[00:23.00]沒 沒有退路 問我也不要思路[00:29.00]沒 沒人去仰慕 那我就繼續忙碌[00:34.00]lalala 思前想後[00:37.00]差一點忘記了怎麼投訴[00:40.00]lalala 今後之後 不要犯同一個錯誤[00:46.00]將這樣的感觸 寫一封情書送給我本身[00:51.00]感動得要哭 好久沒哭[00:54.00]不失爲天大的幸福 將這一份禮物[00:59.00]這一封情書 給本身祝福[01:02.00]能夠不在意 才能對別人在意[01:20.00]有 一點幫助 就能夠對誰傾訴[01:26.00]有 一我的保護 就不用自我保護[01:32.00]有 一點知足 就準備如何結束[01:37.00]有 一點點領悟 就能夠日後回顧01:43.00]lalala 思前想後[01:46.00]差一點忘記了怎麼投訴[01:49.00]lalala 今後之後 不要犯同一個錯誤[01:54.00]將這樣的感觸 寫一封情書送給我本身[01:59.00]感動得要哭 好久沒哭[02:03.00]不失爲天大的幸福 將這一份禮物[02:08.00]這一封情書 給本身祝福[02:11.00]能夠不在意 才能對別人在意[02:43.00]Lalalala....... Lalalala.......[02:55.00]從開始哭着忌妒 變成了笑着羨慕[03:00.00]時間是怎麼樣把握了我皮膚[03:03.00]只有我本身最清楚[03:06.00]將這樣的感觸 寫一封情書送給我本身[03:11.00]感動得要哭 好久沒哭[03:15.00]不失爲天大的幸福 將這一份禮物[03:19.00]這一封情書 給本身祝福[03:22.00]能夠不在意 才能對別人在意[03:28.00]讓我親手 將這樣的感觸[03:31.00]寫一封情書送給我本身[03:34.00]感動得要哭 好久沒哭[03:37.00]不失爲天大的幸福[03:39.00]就好好將這一份禮物[03:42.00]這一封情書 給本身祝福[03:45.00]能夠不在意 才能對別人在意'}];
function $(id){
    return document.getElementById(id);
}

function init(){
    //歌曲名
    lyric_tit = $('lyric_tit');
    //歌詞外圍div
    lyric_con = $('lyric_con');
    //包裹歌詞的div
    lyric_txt = $('lyric_txt');
    //放置實時獲取播放時間的容器
    time_update = $('time_update').getElementsByTagName('time')[0];
    //放置歌曲總時間/剩餘多少時間的容器
    time_all = $('time_all').getElementsByTagName('time')[0];
    //進度條 白色
    progress_bar = $('progress_bar');
    //實時變化的進度條 紅色
    progress_cube = $('progress_cube');
    //上一首
    up_song = $('up_song');
    //播放、暫停
    play_stop = $('play_stop');
    //下一首
    next_song = $('next_song');
    //音頻
    audio = $('audio');
    //測試的p節點
    p = $('p');
    //初始化   取數組第一個
    audioIndex = 0;
    //音頻初始化
    audioInit();
    //歌詞初始化
    lyric_str();
    //播放 暫停
    play_stop.addEventListener('click',play_stop_lick,false);
    //上一首
    up_song.addEventListener('click',up_song_lick,false);
    //下一首
    next_song.addEventListener('click',next_song_lick,false)
    //歌曲時間每變化就觸發
    audio.addEventListener('timeupdate',audio_timeupdate,false);
    //進度條單擊事件   根據點擊進度條的位置設置歌曲的播放時間，同時改變歌詞。
    progress_bar.addEventListener('click',progress_bar_click,false);
    
}

/*
* 點擊進度條某一位置觸發事件，並根據進度條的位置改變歌曲的播放時間 和 歌詞的樣式變化
*/
function progress_bar_click(e){
    var e = e ? e : event;
    //獲取座標
    var pageX = e.pageX;
    //獲取白色進度條的left值 
    var progress_bar_Left = progress_bar.offsetLeft;
    //計算進度條的百分比
    var n = (pageX - progress_bar_Left)/progress_bar.offsetWidth;
    //獲取歌曲的總時間
    var audio_duration = audio.duration;
    /*
    *根據進度條的百分比改變音頻的播放時間  
    *公式 = 鼠標點擊的位置到div最左邊的位置寬度/div的總寬度*音頻的總時間
    */
    audio.currentTime = n*audio_duration;
    
    //獲取音頻播放的時間
    var audio_currentTime = audio.currentTime
    //獲取到音頻播放的秒數
    var num = parseInt(audio_currentTime);
    
    //獲取到當前的 歌詞節點
    var objElem_p = elem_p(num)
    
    //歌詞的切換 樣式調整
    lyric_txt_p(objElem_p);
}

/*
* 點擊進度條時尋找指定的歌曲詞的節點。
* 遞歸去找直到找到爲止。
*/
function elem_p(num){
    var boj_p = $('lyric'+num);
    if(!boj_p){
        return elem_p(num-1);
    }else{
        return boj_p;
    }
    return '';
}

/**
*根據音頻播放時間實時的改變進度條
*/
function audio_timeupdate(){
    //獲取音頻的總時間 以秒爲單位
    var audio_duration = audio.duration;
    //獲取音頻的播放時間 以秒爲單位
    var audio_currentTime = audio.currentTime
    //歌曲自動播放完就切換下一首
    if(audio_duration == audio_currentTime){
        next_song_lick();
    }
    
    //計算視頻播放的百分比
    var n = audio_currentTime/audio_duration;
    //根據視頻播放的百分比改變進度條  公式 = 播放時間/總時間*進度條的寬度
    progress_cube.style.width = n*progress_bar.offsetWidth + 'px';

    //獲取到音頻播放的秒數
    var num = parseInt(audio_currentTime);
    //將播放的事件顯示到頁面  format()轉換爲分秒格式
    time_update.innerHTML = format(num);

    //剩餘多少事件 而且顯示到頁面
    var sum_num = parseInt(audio_duration)-parseInt(audio_currentTime);
    if(!isNaN(sum_num)){
        time_all.innerHTML = format(sum_num);
    }else{
        time_all.innerHTML = '00:00';
    }
    
    //獲取到當前唱到的這一句歌詞
    var boj_p = $('lyric'+num);
    //改變樣式
    lyric_txt_p(boj_p);
}

/**
*歌詞的切換 樣式調整
*/
function lyric_txt_p(obj){
    //獲取全部的歌詞節點
    var lyric_p = lyric_txt.getElementsByTagName('p');
    //循環全部的節點而且爲節點index賦值   注意不給index賦值的狀況下index爲undefined;
    for(var i = 0; i < lyric_p.length;i++){
        lyric_p[i].index = i;
    }
    
    //當前節點不爲空的狀況下，就改變樣式
    if(obj){
        //給當前節點以前已經唱過的歌詞賦值樣式。 
        for(var j = 0;j < obj.index; j++){
            lyric_p[j].className = 'played';
        }
        //防止進度條往回點  因此index大於當前歌詞節點的節點樣式所有賦值爲空
        for(var j = obj.index;j < lyric_p.length; j++){
            lyric_p[j].className = '';
        }
        
        //給當前歌詞賦值樣式
        obj.className = 'played2'
        //改變歌詞的樣式   歌詞外圍div的寬度/2-當前歌詞節點的top值
        lyric_txt.style.top =  lyric_con.offsetWidth/2 - obj.offsetTop +'px';
        
    }
}

//上一首 
function up_song_lick(){
    //audioIndex 默認爲0  
    audioIndex --;
    //當歌曲已是第一條的時候  把歌曲切換到最後一條
    if(audioIndex < 0){
        audioIndex = lyric.length-1;
    }
    //初始化音頻
    audioInit();
    //播放 暫停
    play_stop_lick();
}

// 下一首
function next_song_lick(){
    audioIndex ++;
    //當歌曲已是最後一條的時候  切換到第一條歌曲
    if(audioIndex > lyric.length-1){
        audioIndex = 0;
    }
    audioInit();
    play_stop_lick();
}

//播放
function  play_stop_lick(){
    //audio.paused 暫停時就爲true
    if(audio.paused){
        //播放
        audio.play();
        play_stop.value = '暫停';
    }else{
        //暫停
        audio.pause();
        play_stop.value = '播放';
    }
}

//解析歌詞
function lyric_str(){
    //獲取當前歌曲的歌詞
    var str =  lyric[audioIndex].content;
    //alert(str);
    var html = '';
    var arr = str.split('[');
    for(var i = 0 ; i < arr.length; i++ ){
        var arr2 = arr[i].split(']');
        //歌詞
        var text = arr2[1];
        //歌詞對應的時間
        var time = arr2[0].split('.');
        //毫秒
        var ms = time[1];
        //獲取分 秒
        var time2 = time[0].split(':');
        //分
        var m = time2[0];
        //秒
        var s = time2[1];
        var num_s = (parseInt(m)*60)+parseInt(s);
        //拼接歌詞
        if(text){
            html += '<p id="lyric'+ num_s +'">'+ text +'</p>'
        }
        
    }
    lyric_txt.innerHTML = html;
    
}

//初始化
function audioInit(){
    //將進度條的寬度初始化爲0 紅色的
    progress_cube.style.width = 0 + 'px';
    //獲取歌曲的一個總時間
    if(!isNaN(audio.duration)){
        time_all.innerHTML = format(audio.duration);
    }else{
        time_all.innerHTML = '00:00'
    }
    //獲取當前歌曲的名稱
    lyric_tit.innerHTML = lyric[audioIndex].name;
    //獲取當前歌曲的路徑
    audio.src = lyric[audioIndex].audio_src;
    //歌詞解析
    lyric_str();
}

function format(num){
    var num = parseInt(num);
    //獲得的是分鐘
    var m = parseInt(num/60); 
    //獲得的是秒
    var s = parseInt(num%60);
    //返回拼接的時間
    return format_s(m)+':'+ format_s(s)
}

//修改歌曲時間格式
function format_s(num){
    if(num < 10){
        return '0'+num;
    }
    return num;
}
window.addEventListener('load',init,false);

三、CSS代碼：spa

#music{
    width:400px;
    height:600px;
    margin:auto;
    text-align:center;
    background-color:#999;
}
#lyric_div{
    width:400px;
    height:500px;
}

#lyric_tit{
    color:#F00;
    font:bold;
    height:30px;
    line-height:30px;
}

#lyric_con{
    overflow:hidden;
    height:470px;
    position:relative;
}

#lyric_txt{
    position:absolute;
    width:400px;
    top:0px;
    left:0px;
}

#bt_div{
    width:400px;
    height:50px;
    line-height:50px;
}
#progress{
    width:400px;
    height:50px;
    line-height:50px;
}

#time_update{
    float:left;
}

#time_all{
    float:left;
}

#time_update,#time_all{
    width:54px;
}
#progress_bar{
    float:left;
    width:290px;
    height:3px;
    background-color:#FFF;
    margin-top:24px;
    cursor:pointer;
}
#progress_cube{
    height:3px;
    background-color:#F00;
}

#lyric_txt p.played{
    color:#FF0;
}

#lyric_txt p.played2{
    color:#FF0;
    font-weight:700;
    font-size:20px;
}

至此以上是完整的代碼，因爲MP3文件沒有辦法上傳，因此請本身到QQ音樂下載。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。