中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何在HTML5中自定義一個(gè)mp3播放器-創(chuàng)新互聯(lián)

如何在HTML5中自定義一個(gè)mp3播放器？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供思禮企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5開(kāi)發(fā)、小程序制作等業(yè)務(wù)。10年已為思禮眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

audio對(duì)象

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();
            };

當(dāng)前播放的時(shí)間currentTime

音頻總時(shí)長(zhǎng)duration

   //返回音頻的總長(zhǎng)度
            myAudio.addEventListener('canplay',function(){
                durationNode.innerHTML = myAudio.duration;
            });
            //更新當(dāng)前播放的時(shí)間
            setInterval(function(){
                currentNode.innerHTML = myAudio.currentTime;
            },100);

音頻源currentSrc

var myAudio = new Audio();
        myAudio.src = 'data/imooc.mp3';
        console.log(myAudio.currentSrc);

loop循環(huán)

myAudio.loop = true;

音頻播放結(jié)束ended

myAudio.addEventListener('ended',function(){
            console.log('音頻播放結(jié)束');
            console.log(myAudio.ended)
        });

重新加載

 loadBtn.onclick = function(){
            myAudio.load();
        };

跳轉(zhuǎn)到新的播放位置seeked / seeking

 myAudio.addEventListener('seeked',function(){
            console.log('seeked');
        });
        myAudio.addEventListener('seeking',function(){
            console.log('seeking');
            sekingNum++;
            seekingNum.innerHTML = sekingNum;
        });

playbackRate設(shè)置當(dāng)前播放速度

   myAudio.playbackRate = '15';
        console.log(myAudio.playbackRate)

全屏requestFullScreen

 btnScreen.onclick = function(){
            myAudio.webkitRequestFullScreen();
        }

loop 循環(huán)

 myAudio.loop = true;

volumechange音量改變

  myAudio.addEventListener('volumechange',function(){
            console.log('音頻的聲音改變了')
        });

timeupdate音頻正在播放狀態(tài)

 myAudio.addEventListener('timeupdate',function(){
            console.log('音頻正在播放中...')
        })

自定義mp3播放器

放圖

如何在HTML5中自定義一個(gè)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 內(nèi)層元素 -->
        <div class='innerNode'>
            <!-- topNode 封面圖元素 -->
            <div class='topNode'>
                <!-- 音樂(lè)名稱(chēng) -->
                <div class='musicName'></div>
            </div>
            <!-- lineNode 進(jìn)度條元素 -->
            <div class='lineNode'>
                <!-- 進(jìn)度條-->
                <div class='progressNode'>
                    <div class='progressleft'></div>
                    <div class='progressright'></div>
                    <!-- 真正的進(jìn)度條 -->
                    <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,
        //進(jìn)度條的選擇器
        trueLine = document.querySelector('.trueLine'),
        //進(jìn)度條外層的元素
        progressNode = document.querySelector('.progressNode'),
        //最外層元素
        outerNode = document.querySelector('.outerNode'),
        //選擇一下封面背景
        topNode = document.querySelector('.topNode'),
        //下一首歌的按鈕
        nextNode = document.querySelector('.nextNode'),
        //上一首歌的按鈕
        lastNode = document.querySelector('.lastNode'),
        //音樂(lè)名稱(chēng)
        musicName = document.querySelector('.musicName');
        //給播放器添加js
        //創(chuàng)建audio對(duì)象
        var myAudio = new Audio();
        //給audio對(duì)象一個(gè) src
        //所有的數(shù)據(jù)存在數(shù)組里面
        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+')';
        //給音樂(lè)名稱(chēng)
        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';
            }
        };
        //播放時(shí) 進(jìn)度條的長(zhǎng)度控制計(jì)算
        myAudio.addEventListener('timeupdate',function(){
            trueLine.style.width = myAudio.currentTime / myAudio.duration * 100 + '%';
        });
        //點(diǎn)擊progressNode元素 讓進(jìn)度條直接到達(dá)這個(gè)位置
        progressNode.onclick = function(e){
            var ev = e || event;
            //算法 就是 算出 點(diǎn)擊的位置 在 外層進(jìn)度條的 多少像素
            //需要一個(gè)鼠標(biāo)坐標(biāo)點(diǎn) 減去 外層元素的 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();
        };
        //音樂(lè)播放的函數(shù)
        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+')';
            //給音樂(lè)名稱(chēng)
            musicName.innerHTML = allMusic[Index].MusicName;
        }
        //上一首歌的點(diǎn)擊事件
        lastNode.onclick = function(){
            Index --;
            if(Index == -1){
                Index = allMusic.length-1;
            }
            MusicPlayFn();
        };
    </script>
</body>
</html>

關(guān)于如何在HTML5中自定義一個(gè)mp3播放器問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

分享名稱(chēng)：如何在HTML5中自定義一個(gè)mp3播放器-創(chuàng)新互聯(lián)
文章源于：http://www.rwnh.cn/article26/cciecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)站策劃、微信小程序、云服務(wù)器、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站
个旧市| 黑龙江省| 公主岭市| 商南县| 宝丰县| 泰顺县| 鱼台县| 南靖县| 乌海市| 离岛区| 谢通门县| 紫阳县| 湾仔区| 孟连| 盈江县| 邹平县| 留坝县| 永兴县| 红桥区| 漯河市| 宝应县| 津南区| 汕头市| 奇台县| 平定县| 江阴市| 定南县| 汽车| 通化市| 绍兴市| 砀山县| 佛冈县| 双牌县| 铅山县| 枣强县| 长泰县| 大庆市| 佛教| 寿宁县| 泽普县| 玉林市|