当前位置：移动技术网 > IT编程>网页制作>Html5 > HTML5音频（自定义mp3播放器源码）

HTML5音频（自定义mp3播放器源码）

2020年01月06日 | 移动技术网IT编程 | 我要评论

情燃官场仕途风流,邓州市房价,电动车排名

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

<!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) center center;background-size:cover; transition:.7s;position: relative;}
.linenode{
    width: 100%;height: 46px;border-top: 1px solid #f9f7ee;border-bottom: 1px solid #a29d8a;background: url(musicimage/linebg.jpg) repeat-x; 
}
.progressnode{width: 440px;height: 18px;float: left;margin:13px 0 0 28px;background: url(musicimage/progressbg.jpg) repeat-x;position: relative; }
.progressnode .progressleft{
    width: 7px;height: 100%;position: absolute;left: 0;
    background: url(musicimage/leftnode.jpg);
}
.progressnode .progressright{
    width: 7px;height: 100%;position: absolute;right: 0;
    background: url(musicimage/rightnode.jpg);
}
.bottomnode{
    width: 100%;height: 157px;border-top: 1px solid #a29d8a;
    background: url(musicimage/bottombg.jpg) repeat-x;position: relative;
}
.lastnode{width: 75px;height: 74px;position: absolute;background: url(musicimage/lastbg.png) no-repeat;left: 118px;top: 39px;cursor: pointer;}
.playnode{width: 95px;height: 94px;position: absolute;background: url(musicimage/playnode.png) no-repeat;left: 202px;top: 29px;cursor: pointer;}
.nextnode{width: 75px;height: 74px;background: url(musicimage/rightbg.png) no-repeat;position: absolute;left: 306px;top: 39px;cursor: pointer;}
.volumenode{width: 37px;height: 32px;background: url(musicimage/volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}
.no_volumenode{width: 37px;height: 32px;background: url(musicimage/no_volume.png) no-repeat; position: absolute;right: 43px;top: 58px;cursor: pointer;}

.trueline{position: absolute;left: 3px;top: 2px;height: 12px;width: 0%;
    background: url(musicimage/green_bg.png) repeat-x;border-radius: 6px; 
    border-right: 1px solid #787463;

}
.musicname{color: white;position: absolute;bottom: 2px;left: 5px;}

    </style>
</head>
<body>
    <!-- outernode 最外层的元素 -->
    <div class='outernode'>
        <!-- innernode 内层元素 -->
        <div class='innernode'>
            <!-- topnode 封面图元素 -->
            <div class='topnode'>
                <!-- 音乐名称 -->
                <div class='musicname'></div>
            </div>
            <!-- linenode 进度条元素 -->
            <div class='linenode'>
                <!-- 进度条-->
                <div class='progressnode'>
                    <div class='progressleft'></div>
                    <div class='progressright'></div>
                    <!-- 真正的进度条 -->
                    <div class='trueline'></div>
                </div>
            </div>
            <!-- bottomnode 空间元素 -->
            <div class='bottomnode'>
                <!-- lastnode 上一曲的按钮-->
                <div class='lastnode'></div>
                <!-- playnode 播放暂停的按钮 -->
                <div class='playnode'></div>
                <!-- nextnode 下一曲的按钮 -->
                <div class='nextnode'></div>
                <!-- volumenode 静音或非静音的按钮-->
                <div class='volumenode'></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //播放暂停的按钮
        //playbln 控制播放暂停的布尔值
        var playbtn = document.queryselector('.playnode'),
        playbln = true,
        //控制声音的按钮
        //volumebln 控制声音的布尔值
        volumenode = document.queryselector('.volumenode'),
        volumebln = true,
        //进度条的选择器
        trueline = document.queryselector('.trueline'),
        //进度条外层的元素
        progressnode = document.queryselector('.progressnode'),
        //最外层元素
        outernode = document.queryselector('.outernode'),
        //选择一下封面背景
        topnode = document.queryselector('.topnode'),
        //下一首歌的按钮
        nextnode = document.queryselector('.nextnode'),
        //上一首歌的按钮
        lastnode = document.queryselector('.lastnode'),
        //音乐名称
        musicname = document.queryselector('.musicname');

        //给播放器添加js
        //创建audio对象
        var myaudio = new audio();
        //给audio对象一个 src
        //所有的数据存在数组里面
        let allmusic = [{
            'musicsrc':'music/mus/acousticguitar1.mp3',
            'musicpic':'music/pic/fmt01.jpg',
            'musicname':'acousticguitar1'
        },{
            'musicsrc':'music/mus/amazinggrace.mp3',
            'musicpic':'music/pic/fmt02.png',
            'musicname':'amazinggrace'

        },{
            'musicsrc':'music/mus/feelsgood2b.mp3',
            'musicpic':'music/pic/fmt03.jpg',
            'musicname':'feelsgood2b'

        },{
            'musicsrc':'music/mus/funbusyintro.mp3',
            'musicpic':'music/pic/fmt04.jpg',
            'musicname':'funbusyintro'

        },{
            'musicsrc':'music/mus/greendaze.mp3',
            'musicpic':'music/pic/fmt05.jpg',
            'musicname':'greendaze'

        },{
            'musicsrc':'music/mus/limosine.mp3',
            'musicpic':'music/pic/fmt06.jpg',
            'musicname':'limosine'

        }],index = 0;
        myaudio.src = allmusic[index].musicsrc;

        //给封面赋值
        topnode.style.backgroundimage = 'url('+allmusic[index].musicpic+')';

        //给音乐名称
        musicname.innerhtml = allmusic[index].musicname;

        //谷歌浏览器不允许直接play
        //myaudio.play();

        //播放暂停的事件
        playbtn.onclick = function(){
            //myaudio.play();
            playbln = !playbln;
            if(playbln == false){
                myaudio.play();
            }
            else{
                myaudio.pause();
            }
        };

        //声音的事件
        volumenode.onclick = function(){
            volumebln = !volumebln;
            if(volumebln == false){
                myaudio.volume = 0;
                this.classname = 'no_volumenode';
            }
            else{
                myaudio.volume = 1;
                this.classname = 'volumenode';
            }
        };

        //播放时 进度条的长度控制计算
        myaudio.addeventlistener('timeupdate',function(){
            trueline.style.width = myaudio.currenttime / myaudio.duration * 100 + '%';
        });

        //点击progressnode元素 让进度条直接到达这个位置
        progressnode.onclick = function(e){
            var ev = e || event;
            //算法 就是 算出 点击的位置 在 外层进度条的 多少像素
            //需要一个鼠标坐标点 减去 外层元素的 offsetleft 和 最外层元素的offsetleft 

            // 320秒 *  0.50 = 160秒
            myaudio.currenttime = myaudio.duration * ((ev.clientx - (this.offsetleft + outernode.offsetleft))/this.offsetwidth);

            trueline.style.width = ((ev.clientx - (this.offsetleft + outernode.offsetleft))/this.offsetwidth) * 100 + '%';
        };

        //下一首歌的事件
        nextnode.onclick = function(){
            index ++;
            if(index == allmusic.length){
                index = 0;
            }
            musicplayfn();
        };
        //音乐播放的函数
        function musicplayfn(){
            myaudio.src = allmusic[index].musicsrc;
            myaudio.currenttime = 0;
            trueline.style.width = '0%';
            if(playbln == false){
                myaudio.play();
            }
            else{
                myaudio.pause();
            }

            //给封面赋值
            topnode.style.backgroundimage = 'url('+allmusic[index].musicpic+')';
            //给音乐名称
            musicname.innerhtml = allmusic[index].musicname;
        }

        //上一首歌的点击事件
        lastnode.onclick = function(){
            index --;
            if(index == -1){
                index = allmusic.length-1;
            }
            musicplayfn();
        };

    </script>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

HTML利用九宫格原理进行网页布局

这篇文章主要介绍了HTML利用九宫格原理进行网页布局,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 20-03-13 [阅读全文]
canvas实现手机的手势解锁的步骤详细

这篇文章主要介绍了canvas实现手机的手势解锁的步骤详细，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编... [阅读全文]
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

这篇文章主要介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值... [阅读全文]
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能（附转换公式）

这篇文章主要介绍了Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能（附转换公式）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具... [阅读全文]
Html5页面上如何禁止手机虚拟键盘弹出

这篇文章主要介绍了Html5页面上如何禁止手机虚拟键盘弹出,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编... [阅读全文]
html2canvas截图空白问题的解决

这篇文章主要介绍了html2canvas截图空白问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编... [阅读全文]
HTML5 Canvas实现放大镜效果示例

这篇文章主要介绍了HTML5 Canvas实现放大镜效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小... [阅读全文]
html5 移动端视频video的android兼容(去除播放控件、全屏)

这篇文章主要介绍了html5 移动端视频video的android兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们... [阅读全文]
详解HTML5常用的语义化标签

这篇文章主要介绍了详解HTML5常用的语义化标签的相关资料,需要的朋友可以参考下... 19-09-27 [阅读全文]
Html5踩坑记之mandMobile使用小记

这篇文章主要介绍了Html5踩坑记之mandMobile使用小记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随... [阅读全文]

网友评论


验证码：

HTML5音频（自定义mp3播放器源码）

2020年01月06日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论