JavaScript實現音樂播放器

2022-08-14 14:00:35

本文範例為大家分享了vue + element ui實現錨點定位的具體程式碼，供大家參考，具體內容如下

效果

HTML程式碼

<!--播放器-->
<div id="player">
    <!--播放控制元件-->
    <div id="playerControl">
        <div class="playerImg">
            <img src="../images/demo3/1.jpg" alt="" width="150" height="150">
            <audio id="audio">
                <source src="../video/1.mp3">
            </audio>
        </div>
        <div id="pcontrol" class="clearfix">
            <button class="prev" title="上一曲"></button>
            <button id="play" class="play1" title="播放"></button>
            <button class="next" title="下一曲"></button>
            <button class="stop" title="停止"></button>
        </div>
    </div>
    <!--播放進度-->
    <div id="progrees">
        <div id="curProgrees"></div>
    </div>
    <!--播放時間-->
    <div id="playTime">
        <span id="presentTime">00 : 00</span>
        <span>/</span>
        <span id="totalTime">00 : 00</span>
    </div>
    <!--音訊列表-->
    <div id="playerList">
        <ul>
            <li class="active">
                <span class="mr10">1</span>
                <span>Mascara</span>
                <span>-</span>
                <span>G.E.M. 鄧紫棋</span>
            </li>
            <li>
                <span class="mr10">2</span>
                <span>西安人的歌</span>
                <span>-</span>
                <span>範煒與程渤智</span>
            </li>
            <li>
                <span class="mr10">3</span>
                <span>往後餘生</span>
                <span>-</span>
                <span>李貳叄</span>
            </li>
        </ul>
    </div>
</div>

Css程式碼

*{margin:0; padding:0;}
.bd{border:1px solid red;}
.fl{float: left}
.fr{float:right}
.mr10{margin-right:10px;}
ul{list-style: none;}
.clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;}
body{background:#262626; padding:50px 0; color:#fff; }
 
#player{width:600px; height:400px; background:#130519de;margin:0 auto;}
#playerControl{position:relative;height:200px;}
#playerControl .playerImg{padding:25px; box-sizing: border-box;}
 
/*播放控制介面*/
#pcontrol{position: absolute;left:300px; top:85px;}
#pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/player.png") no-repeat}
 
/*暫停*/
#pcontrol .play1{background-position: -8px -8px}
#pcontrol .play1:hover{background-position: -49px -8px}
 
/*播放*/
#pcontrol .play2{background-position: -8px -49px}
#pcontrol .play2:hover{background-position: -49px -49px}
 
/*上一曲*/
#pcontrol .prev{background-position: 0 -112px}
#pcontrol .prev:hover{background-position: -30px -112px}
 
/*下一曲*/
#pcontrol .next{background-position: 0 -141px}
#pcontrol .next:hover{background-position: -30px -141px}
/*停止播放*/
#pcontrol .stop{background-position: 0 -84px}
#pcontrol .stop:hover{background-position: -30px -84px}
 
/*播放列表*/
#playerList{padding:20px 0px}
#playerList ul li{padding:10px 20px; }
#playerList ul li.active,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer}
 
/*播放進度*/
#progrees{width:550px; height:5px; background:#ccc; margin:0 auto;}
#curProgrees{width:0px; height:100%; background:darkolivegreen;}
 
/*播放時間*/
#playTime{padding:10px 25px 0px; text-align: right;}

Js功能程式碼

window.onload = function (ev) {
    //獲取元素
        var play = document.querySelector("#play");//播放按鈕
        var audio = document.querySelector("#audio");//音訊檔
        var next = document.querySelector(".next");//下一曲
        var prev = document.querySelector(".prev");//上一曲
        var stop = document.querySelector(".stop");//停止
        var playerListLi = playerList.querySelectorAll("li")//播放列表li
        var totalTime = document.querySelector("#totalTime");//總時間
        var presentTime = document.querySelector("#presentTime");//當前時間
 
    //歌曲地址
        var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"];
 
    //1. 點選播放歌曲，再次點選播放暫停
        play.addEventListener("click",startPlay);
    //2.點選切換下一曲
        next.addEventListener("click",theNext);
    //3.點選切換上一曲
        prev.addEventListener("click",thePrev);
    //4.點選停止播放
        stop.addEventListener("click",stopPlay);
 
 
 
    //定義播放函數
        //1.1 定義標杆，判斷是否播放歌曲
        var flag = true;
        function startPlay(){
            if(flag){
                play.className="play2";
                play.title = "暫停";
                audio.play();
                //播放進度
                playProgress();
                //播放時間
                playTime();
            }else{
                play.className="play1";
                play.title = "播放";
                audio.pause();
            }
            flag = !flag;
        }
    //定義下一曲
        var n = 0;//定義歌曲索引
        function theNext(){
            n++;
            if(n == playerMusic.length){
                n = 0;
            }
            audio.src = playerMusic[n];
            //歌曲播放
            flag = true;
            startPlay();
            //切換列表
            switchList();
        }
    //定義下一曲
        function thePrev(){
            n--;
            if(n < 0){
                n = playerMusic.length - 1;
            }
            audio.src = playerMusic[n];
            //歌曲播放
            flag = true;
            startPlay();
            //切換列表
            switchList();
        }
    //切換列表
        function switchList(){
            for(var i=0; i<playerListLi.length; i++){
                playerListLi[i].className = "";
            }
            playerListLi[n].className = "active";
        }
    //停止播放
        function stopPlay(){
            //設定當前播放時間為0;,並暫停播放
            audio.currentTime = 0;
            flag = false;
            startPlay();
        }
 
    //播放進度
        function playProgress(){
            //定義計時器
            var timer = null;
            if(flag){
                //開啟計時器
                timer = setInterval(function(){
                    if(audio.currentTime >= audio.duration){
                        curProgrees.style.width = progrees.offsetWidth + "px";
                        clearInterval(timer);
                        theNext();
                    }else{
                        curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px";
                    }
 
                },30);
            }else{
                //關閉計時器
                clearInterval(timer);
            }
 
        }
    //播放時間
        function playTime(){
            //當前時間
            var timer2 = null;
            if(flag){
                timer2 = setInterval(function(){
                    //總時間
                    setTime(audio.duration,totalTime);
                    setTime(audio.currentTime,presentTime);
                },1000)
            }else{
                clearInterval(timer2)
            }
        }
    //設定時間
        function setTime(audioTime,obj){
            //總時間
            allMinute = Math.floor(audioTime/60);
            if(allMinute<10){
                allMinute = "0" + allMinute;
            }
            allSecond = Math.floor(audioTime%60);
            if(allSecond<10){
                allSecond = "0" + allSecond;
            }
            var allTime = allMinute + " : " + allSecond;
            obj.innerHTML = allTime;
        }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

JavaScript實現音樂播放器

熱門文章