您的位置：首页 > Web前端 > > 正文

用html5做一个音乐的播放器（HTML5自定义mp3播放器源码）

更多时间：2021-10-09 00:52:06 类别：Web前端浏览量：2805

用html5做一个音乐的播放器

HTML5自定义mp3播放器源码

audio对象

src兼容.ogg .wav .mp3

<audio controls src='data/imooc.wav'></audio>

width autoplay loop muted静音

<audio controls src='data/imooc.wav' autoplay loop width='500' height='500' muted></audio>

播放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做一个音乐的播放器（HTML5自定义mp3播放器源码）

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}        
.outerNode{width: 505px;height: 406px;position: absolute;left: 50%;top: 50%;margin: -204px 0 0 -253.5px;border: 1px solid #a6a18d;border-radius:8px;box-shadow: 0 0 16px #a6a18d; }
.innerNode{width: 503px;height: 405px;border-top:1px solid #e1d1b9;border-left:1px solid #ceccbf;border-radius: 8px;overflow: hidden;border-right:1px solid #ceccbf;   }
.topNode{width: 100%;height: 198px;border-bottom: 1px solid #787463;background: url(music/pic/fmt01.jpg" alt="用html5做一个音乐的播放器（HTML5自定义mp3播放器源码）" border="0" />

总结

以上所述是小编给大家介绍的HTML5自定义mp3播放器源码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

标签：HTML5 音频 mp3 播放器

上一篇：织梦模板被挂了怎么办（详解简单修改DEDECMS织梦模板防止网站挂马的教程）

下一篇：怎么样才知道云服务器够不够用（新手应该怎么选择云服务器才能避免被坑？）

您可能感兴趣

用html5做一个音乐的播放器（HTML5自定义mp3播放器源码）

用html5做一个音乐的播放器

热门推荐

排行榜