HTML5如何自定义mp3播放器

小编给大家分享一下HTML5如何自定义mp3播放器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

audio对象

src兼容.ogg .wav .mp3：

width autoplay loop muted静音：

播放play()：

 var myAudio = new Audio();        myAudio.src = 'data/imooc.wav';        myAudio.play();        btn.onclick = function(){            myAudio.play();        };

暂停pause()

pauseNode.onclick = function(){                myAudio.pause();            };

当前播放的时间currentTime

音频总时长duration;

 //返回音频的总长度            myAudio.addEventListener('canplay',function(){                durationNode[xss_clean] = myAudio.duration;            });            //更新当前播放的时间            setInterval(function(){                currentNode[xss_clean] = myAudio.currentTime;            },100);

音频源currentSrc:

var myAudio = new Audio();        myAudio.src = 'data/imooc.mp3';        console.log(myAudio.currentSrc);

loop循环

myAudio.loop = true;

音频播放结束ended

myAudio.addEventListener('ended',function(){            console.log('音频播放结束');            console.log(myAudio.ended)        });

重新加载

  load=adBtn.onclick = function(){myAudio.load();        };

跳转到新的播放位置seeked / seeking

 myAudio.addEventListener('seeked',function(){            console.log('seeked');        });        myAudio.addEventListener('seeking',function(){            console.log('seeking');            sekingNum++;            seekingNum[xss_clean] = sekingNum;        });

playbackRate设置当前播放速度

           myAudio.playbackRate = '15'; console.log(myAudio.playbackRate)

全屏requestFullScreen

 btnScreen.onclick = function(){            myAudio.webkitRequestFullScreen();        }

loop 循环

 myAudio.loop = true;

volumechange音量改变

            myAudio.addEventListener('volumechange',function(){   console.log('音频的声音改变了')        });

timeupdate音频正在播放状态:

 myAudio.addEventListener('timeupdate',function(){            console.log('音频正在播放中...')        })

自定义mp3播放器

以上是"HTML5如何自定义mp3播放器"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！