Xunm模版升级成功,原购买的朋友可以联系作者进行升级操作
首页 » 程序 » 如何从零打造WEB音乐播放器
如何从零打造WEB音乐播放器
  • admin
  • 2019-01-09
  • 31 次
  • 0 条
  • 程序

  • 该demo注释齐全,拥有列表循环,控制进度,控制音量,快进音乐等功能,案例非常完整,希望能帮助到你!

    源码下载:http://uquhu.cn/fmusic-demo.zip

    源码演示:http://uquhu.cn/demo/
    Screenshot_2019-01-09-12-25-20.png

    /** 
     *  作者:lovefc 
     *  本课知识点: 
     *        1. 如何使用audio进行播放,暂停 
     *        2. 如果控制音乐列表循环 
     *        3. 如何控制音乐播放进度 
     *        4. 如何去控制音量 
     *        5. 如何去控制播放快慢 
     */  
      
    // 先来生成一个audio对象  
    var musicfc = document.createElement('audio');  
        musicfc.controls = false;  
        musicfc.src = '';  
        document.body.appendChild(musicfc);  
    // 判断一下音乐播放状态  
    var playStatus = 0,  
        //当前音乐播放总时长,记录一下总时长  
        allTime = 0,  
        // 当前音乐播放时长,记录一下当前进度的时长  
        currentTime = 0,  
        // 存储一下播放列表  
        arrMusic = new Array(),  
        // 当前播放计数, 默认从零开始  
        nowPlayNum = 0,  
        // 播放列表数量计数  
        arrMusicNum = 0;  
    // 重新赋予音乐属性  
    function attrMusic(arr) {  
        // 检测是不是有url这个值,没有就滚蛋  
        if (arr && arr.hasOwnProperty('url')) {  
            musicfc.src = arr['url']; // 改变当前的music的值  
            $('#round_icon').attr("src", arr['pic']); // 改变封面的图片  
            $('.songname').html(arr['title']); // 改变标题  
            allTime = musicfc.duration; // 重新获取总时长  
            currentTime = musicfc.currentTime; // 重新获取当前进度时长  
        }  
    }  
    // JSON 转成数组  
    function jsonToArray(json) {  
        // 重复调用该函数的时候,清空数组  
        arrMusic = new Array();   
        // 如果传入的json为空的话,直接返回false  
        if (json == null && json.toString() == '') {  
            console.log('json error');  
            return false;  
        }  
        // 很好,现在来循环这个json,把它变成一个数组,这样比较好操作  
        for (var item in json) {  
            arrMusic[item] = json[item];  
        }  
        // 调用函数,重新开始赋值  
        attrMusic(arrMusic[nowPlayNum]);  
        // 记录一下一共有几首歌  
        arrMusicNum = arrMusic.length;   
    }  
    // 将json转换成数组并且将当前的元素值赋值到audio的元素中  
    jsonToArray(musicJson);  
    // 播放音乐  
    function autoPlay() {  
        playStatus = 1;   
        musicfc.play(); // 播放音乐  
        // 这里是改图标  
        $(".play").attr("class", 'fa fa-stop-circle play fa-2x');  
    }  
    // 暂停  
    function stopPlay() {  
        playStatus = 0;  
        musicfc.pause(); // 暂停音乐  
        // 这里同样是改图标  
        $(".play").attr("class", 'fa fa-play-circle play fa-2x');  
    }  
    // 进度判断  
    // ontimeupdate 在当前播放位置改变时执行函数  
    // 参考资料:http://www.runoob.com/jsref/event-ontimeupdate.html  
    musicfc.ontimeupdate = function() {  
        allTime = musicfc.duration; // 总时长  
        // 如果没有总时长,就说明这个音乐文件不存在,那么就不执行  
        if(allTime){  
            // 正在播放的时长,这里不能读取全局变量里面的,因为这个值总是在更新,所以要取最新的  
            currentTime = musicfc.currentTime;  
            // 计算一下当前的报进度,当前时长/总时长  
            var PlayProgress = Math.round(currentTime / allTime * 100);  
            // 改变当前进度条的值,用于实时监听当前的播放进度  
            $('#PlayProgress').val(PlayProgress);  
        }  
    };  
    // 切换上一首音乐  
    function prevMusic() {  
        // 先把值减去1  
        nowPlayNum--;  
        // 判断值是否小于0.如果小于0,就说明列表已全部循环完毕,那么重新开始吧  
        // 如果小于0,就把当前的播放数组数量减去1,因为数组是从零开始的  
        if (nowPlayNum < 0) {  
            nowPlayNum = arrMusicNum - 1;  
        }  
        // 很好,那么开始赋值吧  
        attrMusic(arrMusic[nowPlayNum]);  
    }  
    // 切换下一首音乐  
    function nextMusic() {  
        // 加 加 加   
        nowPlayNum++;  
        // 判断当前播放的列表数量是不是大于了总列表的数量,大于,就重零开始吧  
        if (nowPlayNum > arrMusicNum) {  
            nowPlayNum = 0;  
        }  
        // 赋值  
        attrMusic(arrMusic[nowPlayNum]);  
    }  
    // 监听播放结束,然后来搞点事情  
    musicfc.addEventListener('ended',  
    function() {  
        // 如果此时状态还是在播放,那么就切换到下一首  
        if (playStatus == 1) {  
            nextMusic(); // 把数组移到下一个,赋值元素  
            autoPlay(); // 重新开始播放,初始化属性值  
        } else {  
            // 这里就是停止了  
            playStatus = 0;  
            musicfc.pause();  
            $(".play").attr("class", 'fa fa-play-circle play fa-2x');  
        }  
    },  
    false);  
    // 控制播放进度,val是选择的进度  
    function PlayProgress(val) {  
        if(allTime && val){  
            // 这里进行一下数值处理  
            musicfc.currentTime = Math.round(allTime * val / 100);   
            $('#PlayProgress').val(PlayProgress);  
        }  
    }  
    // 控制播放速度  
    function PlayRate(val) {  
        // 这里是加快,最大值为2  
        val = val/100+1;  
        musicfc.playbackRate = val;  
    }  
    // 播放与暂停--事件监听  
    $('.play').click(function() {  
        if (playStatus == 0) {  
            autoPlay();  
        } else {  
            stopPlay();  
        }  
    });  
    // 切换上一首--事件监听  
    $('.play-left').click(function() {  
        prevMusic();  
        // 如果此时状态还是播放,那么就调用播放  
        if (playStatus == 1) {  
            autoPlay();  
        }  
    });  
    // 切换下一首--事件监听  
    $('.play-right').click(function() {  
        nextMusic();  
        if (playStatus == 1) {  
            autoPlay();  
        }  
    });  
    
    网盘下载地址:点击链接进入下载
    网盘密码: 解压密码:


    最后修改于:2019-01-09 12:27
    分享


    博主介绍

  • 博主:寻梦xunm
  • 邮箱:vipshiyi@qq.com
  • 微信:shiihk
  • 熊掌号:奇乐之梦
  • 语录:追寻最初的梦想,坚持走下去!
  • 博主说说

    申请转正的朋友请在或者文章下面进行评论留言即可,

    转正评论留言格式为:你注册的用户名称或者邮箱即可!