H5编写Audio音乐播放器——李帅醒博客

来源：互联网发布：2017淘宝总额编辑：程序博客网时间：2024/04/30 01:55

今天教大家使用html5 Audio标签实现音乐播放器，模仿QQ音乐、天天动听等类似效果。这是我当年刚接触H5的一个小demo,适合初学者初考，代码也有很大的优化空间。

audio

属性属性值注释srcurl播放音乐的url地址preloadload/auto预加载looploop循环播放controlscontrols是否显示默认的控制按钮autoplayautoplay自动播放

各大浏览器对音乐格式的支持情况

音频格式Chrome FirefoxIE9 OperaSafariOGG支持支持支持MP3支持不支持支持WAV不支持支持不支持

属性

属性Chrome Firefoxduration获取媒体文件的总时长，以秒（S）为单位，如果无法获取返回NaNpaused如果媒体文件被暂停，那么paused属性返回true，反之falseended如果媒体文件播放完毕返回truemuted用来获取是否为静音状态，值为boolvolume控制音量的属性，值为0－1；0 为最小，1为最大startTime返回起始的播放时间error返回错误的代码，额uull的时候为正常，否则可以通过Music.error.code来获取具体繁荣错误代码：currentTime用来获取或者控制当前的播放时间，单位是秒（S）currentSrc以字符串的形式返回正在播放或者已经加载的文件

函数作用load()加载音频，视频play（）播放pause()暂停播放canPlayType()测试是否支持给定类型文件

常用的事件

事件名称事件作用loadstart客户端开始请求数据progress客户端正在请求数据，缓冲play pause ended timeupdate当前播放时间发生改变的时候canplaythrough歌曲已经载入完全canplay缓冲至目前可播放的状态
注意事项：

1.由于音乐文件加载需要事件，所以不能立即取到audio.duration；

2.需要封装一个函数判断音乐播放完毕。

3.因为是移动端需要用rem进行自适应。

JS代码：

源码地址，可以去下载看看 http://download.csdn.net/download/wcslb/9740065

fn();function fn(){var w = window.innerWidth / 30;var html = document.querySelector('html');html.style.fontSize = w + 'px';};window.onresize = fn;$("#footer").load("footer.html");//轮播图var mySwiper = new Swiper('.swiper-container', {// 环路loop : true,//分页器pagination : '.swiper-pagination',paginationClickable :true,})// 当前播放的歌曲编号var num=0;var audio=document.querySelector("audio");$(".songMenu").on('click',function(){ $("#songMenu").slideDown("fast");})$(".off").on('click',function(){$("#songMenu").slideUp("fast");});$("main").add("header").on('click',function(){$("#songMenu").slideUp("fast");})var musicArr=["mp3/袖手旁观.mp3","mp3/莫文蔚 (Karen Mok) - 当你老了.mp3","mp3/阿肆 - 我在人民广场吃炸鸡.mp3"]//音播放开关乐$(".stop").on('click',function(){if(audio.paused){Index(num);$("#dog").attr("class","dog");$(".stop").html("");}else{audio.pause();$("#dog").removeAttr("class","dog");$(".stop").html("");}})// 上一曲$(".MovePrevious").on('click',function(){num=(3+--num)%3;Index(num);});//下一曲$(".MoveNext").on('click',next);function next(){num=(++num)%3;Index(num);}//点击主页歌单$(".songMenu li").on('click',function(){num=$(this).index();Index(num);})//点击右侧歌单$(".page2 li").on('click',function(){num=$(this).index();Index(num);})//重播$(".playback").on('click',function(){audio.currentTime=0;audio.play();})$(".soundOff").on('click',function(){audio.muted ? $(".soundOff").html("") : $(".soundOff").html("");audio.muted=!audio.muted;})function Index(num){//开始播放歌曲audio.src=musicArr[num];$(".stop").html("");audioPlay(musicArr[num],next);playingStyle();}function playingStyle(){// 主页歌单$(".Mname").css("color","#fff");$(".Msonger").css("color","#bbbab9");$(".songMenu li").eq(num).find("span").css("color","#955ebe");// 右侧歌单$(".Pname").css("color","#fff");$(".Psonger").css("color","#bbbab9");$("#page2 li").eq(num).find("span").css("color","#955ebe");//顶部信息$(".name").html($(".Pname").eq(num).html());$(".author").html($(".Psonger").eq(num).html());}function audioPlay(soundPath,callback){     /*判断声音是否播放完成，播放完成之后执行回调函数*/    audio.src=soundPath;       audio.play();    if(callback != undefined){        var  is_playFinish = setInterval(function(){        if(audio.ended){                    callback();                    window.clearInterval(is_playFinish);        }       if (!isNaN(audio.duration)) {            var timeValue = audio.duration;             //音乐时间            var m=parseInt(timeValue/60);            var s=parseInt(timeValue%60);            s<10 ? s="0"+s : s=s;            $(".startTime").html(m+":"+s);            //当前播放时间            var NowtimeValue = audio.currentTime;            var nowM=parseInt(NowtimeValue/60);            var nowS=parseInt(NowtimeValue%60);                nowS<10 ? nowS="0"+nowS : nowS=nowS;            $(".endTime").html(nowM+":"+nowS);// 用时间比来获取进度条的值            var progressValue =100*(audio.currentTime/audio.duration); //            $("progress").val(progressValue);        };        }, 10);    }}

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb ---李帅醒著）

0 0