奇乐网 - 草根博客网站

如何从零打造WEB音乐播放器

admin 163 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();  
    }  
});  

评论列表 (已有0条评论)

消灭零回复

发表评论 (已有0条评论)