如何从零打造web音乐播放器
2018-12-29 16:38:26 / 3450 / 默认分类该demo注释齐全,拥有列表循环,控制进度,控制音量,快进音乐等功能,案例非常完整,希望能帮助到你!
- /**
- * 作者: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();
- }
- });
封尘
@小白 现代浏览器,都禁止了自动播放,我建议你写个定时任务或者事件,来开启播放
小白
哈哈哈,我会了,加了一个autoplay就可以啦!
小白
我是小白,根据您的源码改进了一下,请问,怎样设置自动播放呢?就是打开网页就自动播放的那种,如果您能回复一下就更好啦!!
封尘
@Meekdai nice,我有个http://uquhu.cn
Meekdai
多年前,我也做过一个音乐播放器,记录自己的生活 http://meekdai.com/music
慕若曦
咦2333
封尘
@YIR 你是说什么滚动条?
YIR
滚动条怎去去除的?
封尘
@WispX 大佬谦虚了!
WispX
膜拜大佬