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.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播放器

放图

 
 
 
     
     
    


    
    

        
        

            
            

                
                

            
            
            

                
                

                    

                    

                    
                    
                    


                    

                        

                            
相关文章
                        
                        

                                                                                                

                                        人们熟悉的寄居蟹属于以下哪种分类   神奇海洋11月21日答案
                                        11-21
                                    
                                                                    

                                        第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍
                                        11-21
                                    
                                                                    

                                        原神恰斯卡怎么培养
                                        11-21
                                    
                                                                    

                                        无期迷途四星装束是谁
                                        11-21
                                    
                                                                    

                                        王者荣耀帝丹高中校服怎么获得
                                        11-21
                                    
                                                                    

                                        光遇姆明季后续版本怎么玩
                                        11-21