酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

html5

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

HTML5自定义mp3播放器源码教程

来源:互联网搜集 作者:秩名 人气: 发布时间:2020-01-08
本篇文章主要介绍了HTML5自定义mp3播放器源码教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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>

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/html5/709038.html

相关文章

  • 自适应与响应式的区别

    自适应与响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析 自适应 跟 响应式 的区别。 注: 本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法 一、什么是自适应布局 自适应布局就是宽度自适用布局,在不......
    02-11
  • HTML5自定义mp3播放器源码教程

    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();......
    01-08
  • 使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨 效果图: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocu......
    01-05
  • 详解使用html2canvas实现将html内容写入到canvas中生成图片

    详解使用html2canvas实现将html内容写入到canvas中生成图片

    之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的 html2canvas官网: http://html2canvas.hertzen.com/ 一:下载html2canvas插......
    01-05
  • 详解HTML文本属性&颜色控制属性

    详解HTML文本属性&颜色控制属性

    一、文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表上划线 (4)none代表什么格式都没有(默认是这个属性) 注意:none的大多数用处在我们使用a......
    12-18
  • 关于html字符串正则判断和匹配的使用介绍

    关于html字符串正则判断和匹配的使用介绍

    最近在写一个组件,需要传入html字符串,里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等,这里记录下。 如何判断传入的字符串包含一个闭合html标签 /\/?[a-z][\s\S]*/i 这个其实并不能判断标签闭合的完整性或者顺序等,......
    12-13
  • H5页面适配iPhoneX的教程

    H5页面适配iPhoneX的教程

    iPhoneX 打消了物理按键,改成底部小黑条,这一窜改导致网页呈现了比力难堪的屏幕适配问题。对付网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理惩罚,所以我们只需要存眷底部与小黑条的适配问题即可(即常见的吸底导航、返回顶......
    12-03
  • Html5之自定义属性(data-,dataset)

    Html5之自定义属性(data-,dataset)

    定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById(box1);le......
    11-19
  • 移动端html5判断是否滚动到底部并且下拉加载

    移动端html5判断是否滚动到底部并且下拉加载

    如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联......
    11-19
  • 5分钟实现Canvas鼠标跟随动画背景方法

    5分钟实现Canvas鼠标跟随动画背景方法

    关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 = 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,......
    11-19

最新更新