H5音乐播放器

Posted 2020-10-06 FaithZX

前段时间无聊用javascript基于H5的audio写一个音乐播放器。误喷，技术有限，文笔不好之处希望各位大神海涵。

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

2、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);

 

3、CSS代码：

#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音乐下载。