首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

HTML5自定义mp3播放器源码

Posted in HTML / CSS onJanuary 06, 2020

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自定义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>

总结

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

HTML5自定义mp3播放器源码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法
Mar 27 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 #HTML / CSS
HTML5自定义视频播放器源码
Jan 06 #HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 #HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 #HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 #HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 #HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 #HTML / CSS
linux(15) Qlabel(1) DFA(1) MapReduce(1) pycharm(6) pyqt5(3) Normal From(1) MybatisPlus(2) JSON(10) css3 (2)
You might like
php 代码优化之经典示例
2011/03/24 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
日本钓鱼渔具和户外用品网上商店：naturum
2016/08/07 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
记帐员岗位责任制
2014/02/08 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
工作分析计划书
2014/04/30 职场文书
个人综合鉴定材料
2014/05/23 职场文书
小学生国庆65周年演讲稿范文（2篇）
2014/09/21 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
python获取带有返回值的多线程
2022/05/02 Python
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android