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.innerHTML = myAudio.duration;
            });
            //更新当前播放的时间
            setInterval(function(){
                currentNode.innerHTML = 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)
        });

重新加载

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

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

 myAudio.addEventListener('seeked',function(){
            console.log('seeked');
        });
        myAudio.addEventListener('seeking',function(){
            console.log('seeking');
            sekingNum++;
            seekingNum.innerHTML = 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播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对潘少俊衡网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！