原生js实现音乐播放界面

落日映苍穹つ 2022-02-15 16:11 239阅读 0赞

## 原生js实现音乐播放界面 ##

做了一个播放界面，感觉还挺复杂的，记录一下过程。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70]  
1、首先先做静态的HTML界面。分析界面结构，一张背景图片，其他的小图标都是用iconfont做的。因为对iconfont的使用不太熟悉，所以代码量较大。关于iconfont的使用，我是在iconfont矢量库下载后，有一个HTML的文档，按照上面指示做的。

**HTML代码**

<body>
    <div class="big">
        
        <div class="bg"><img src="images/index.jpg" alt="">
            
            <audio id="mym"></audio>
            
             <div class="jindu">
                
                 <div class="clearfix">
                     <span class="mname" id="mname">xxxxx</span>
                     <span class="totalTime" id="totalTime">00:00:00</span>
                     <span class="xian">/</span>
                     <span class="current" id="current">00:00:00</span>
                 </div>
                
                
                <div class="jindu_bg" id="jindu_bg">
                    <div class="jindu_color" id="jindu_color">
                    </div>
                </div>
             </div>
            
    
        
            
                <svg class="icon play" id="play" aria-hidden="true">
                    <use  xlink:href="#iconplay"></use>
                </svg>
            
    
            
            <svg class="icon rewind" id="rewind" aria-hidden="true">
                <use xlink:href="#iconrewind"></use>
            </svg>
            
    
            
            <svg class="icon forward" id="forward" aria-hidden="true">
                <use xlink:href="#iconforward"></use>
            </svg>
            
    
            
            <svg class="yinliang icon" id="yinliang" aria-hidden="true">
                <use xlink:href="#iconyinliang">
                    <div class="yinliangt" id="yinliangt">
                        <svg class="jy icon" id="jy" aria-hidden="true">
                            <use xlink:href="#iconyinliang"></use>
                        </svg>
                        <div class="ylt_bg" id="ylt_bg">
                            <div class="ylt_color" id="ylt_color"></div>
                            <div class="ylt_block" id="ylt_block"></div>
                        </div>
                    </div>
                </use>
            </svg>
            
    
            
            <svg class="icon menu" aria-hidden="true">
                <use xlink:href="#iconMenu"></use>
            </svg>
            
        
        </div>
        
    </div>
    <script src="js/audioplay.js"></script>
    <script src="font/iconfont.js"></script>
    </body>

**css样式**  
一些css的公共样式，可以去网上找一些常用的加入自己的公共样式中

/*公共样式*/
    *{margin: 0;padding: 0;}
    img{border:0;}
    a{text-decoration: none;}
    .icon {width: 3em;height: 3em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; }
    body{ font-size: 12px;color: #666; font-family: "微软雅黑";}
    /*公共样式 end*/

设置各个板块和iconfont的位置和大小，主要用的是绝对定位和相对定位。可以将一些结构、样式相同的内容做成组件。

/* 框架 */
    .bg{ position: relative; width: 800px;height: 600px; margin-left: auto;margin-right: auto;}
    /* 框架 end */
    
    /*播放图标样式*/
    .play{ position: absolute;top: 400px;left: 50%;margin-left: -1.5em;}
    svg .onplay{opacity: 0;}
    /*播放图标样式 end*/
    
    /*上一首图标样式*/
    .rewind{ position: absolute;top: 400px;left: 50%;margin-left: -6em;}
    /*上一首图标样式 end*/
    
    /*下一首图标样式*/
    .forward{ position: absolute;top: 400px;left: 50%;margin-left: 3em;}
    /*下一首图标样式 end*/
    /*音量图标样式*/
    .yinliang{position: absolute; top: 410px;left: 50%;margin-left: -14.5em; width: 2em;height: 2em;}
    .yinliangt .jy{width: 1.5em;height: 1.5em; float: left;margin-top: 5px; margin-left: 5px;}
    .yinliangt{position: absolute; top: 380px;left: 50%; margin-left: -24em; width: 220px;height: 25px; background: #f1f0e8;border: 1px solid #9e9887;display: none;}
    .yinliangt.yltBlock{ display: block;}
    .ylt_bg{width: 180px; height: 5px;background: url("../images/jindu-bg.jpg") repeat-x; margin: 10px 10px 10px 30px; border-radius: 10px;border: 1px solid #787463;position: relative;}
    .ylt_block{width: 6px; height: 12px;position: absolute;top: -4px;margin-left: -3px;left: 50%;background: url("../images/jindu-color.jpg") repeat-x;border-radius: 10px;border: 1px solid #9e9887;}
    .ylt_color{width: 50%;height: 5px;background: url("../images/jindu-color.jpg") repeat-x;border-radius: 10px;}
    .jia{float: right;color: #666;margin-right: 2px}
    .jian{float: left;color: #666; margin-left: 3px;}
    /*音量图标样式 end*/
    
    /*歌曲列表图标样式*/
    .menu{position: absolute;top: 410px;left: 50%;margin-left: 13em;width: 2em;height: 2em;}
    /*歌曲列表图标样式 end*/
    /*图标样式 end*/
    
    /*进度条*/
    .clearfix{ width: 440px;height: 20px;}
    .mname{ float: left;}
    .totalTime{ float: right;}
    .xian{ float: right;}
    .current{ float: right;}
    .jindu{position: absolute;top: 310px;left: 50%;margin-left: -220px;
    }
    .jindu_bg{border-radius: 6px;border: 1px solid #787463;width: 440px; height: 8px;background: url("../images/jindu-bg.jpg") repeat-x;}
    
    .jindu_color{width: 0px;height: 7px;background: url("../images/jindu-color.jpg") repeat-x;border: 1px solid #787463;border-radius: 4px;}
    
    /*进度条 end*/

**js代码**  
获取HTML中的标签

let mym = document.getElementById('mym');
        let play = document.getElementById('play');
        let forward = document.getElementById('forward');
        let rewind = document.getElementById('rewind');
        let yinliang = document.getElementById('yinliang');
        let jy = document.getElementById('jy');
        let ylt_color = document.getElementById('ylt_color');
        let ylt_bg = document.getElementById('ylt_bg');
        let ylt_block = document.getElementById('ylt_block');
         let jindu_bg = document.getElementById('jindu_bg');
        let jindu_color = document.getElementById('jindu_color');
        let mname = document.getElementById('mname');
        let totalTime = document.getElementById('totalTime');
        let current = document.getElementById('current');

设置一些变量和存放歌曲的数组。

let musicArr = ['music/goodtime.mp3','music/stuttering.mp3','music/tianheihei.mp3','music/xinanlide.mp3'];//存放歌曲的数组
    let ylt_color_startWidth  = 90; // 色块初始的宽度
        let ylt_block_startLeft = 90 ;  // 小方块初始的left值
        let startX ; // 鼠标开始按下的位置

初始化

mym.volume = 0.5;//初始音量为0.5
        let count = 0;//记录当前歌曲
        mym.src = musicArr[count]; //路径
        mym.play(); //开始播放
        mname.innerHTML = musicArr[count];//显示歌曲名字

设置点击事件实现暂停、播放

play.addEventListener('click',function () {
            if( mym.paused ){
                mym.play();
                this.innerHTML = "<use xlink:href='#iconpause'></use>" ;
            }else{
                mym.pause();
                this.innerHTML = "<use xlink:href='#iconplay'></use>" ;
            }
        });

点击音量条上的小图标实现静音控制

jy.addEventListener("click",function(){
            if(mym.muted) {
                mym.muted = false;
                this.innerHTML = '<use xlink:href="#iconyinliang"></use>';
                mym.play();
            }
            else {
                mym.muted = true;
                this.innerHTML = '<use xlink:href="#iconmute"></use>';
            }
        });

鼠标点击出现音量条，并实现音量控制以及一些交互效果。

yinliang.addEventListener("click", function () {
            yinliangt.className  = "yinliangt yltBlock";
            yinliangt.addEventListener('mouseleave',function () {
                yinliangt.className  = "yinliangt";
            });
        });
        // 音量控制
        let mMove = function(){
            let mx = event.offsetX;
            ylt_color.style.width = mx + "px";
            mym.volume = mx / 180 ;
        };
        let eMove = function(event){
            event.preventDefault(); // 阻止默认事件
            let  mouseX = event.clientX;// 鼠标的在窗口的位置
            let  dis = mouseX - startX ;  // 计算鼠标在窗口的移动距离
            let  disWidth = ylt_color_startWidth + dis ; // 色块跟随鼠标走的宽度:当前宽度+移动距离
            let  bDisWidth = ylt_block_startLeft + dis ;// 滑块跟随鼠标走的宽度:当前宽度+移动距离
            if( disWidth > 180 ){  180disWidth = 180; }// 如果色块的宽度大于了最大值
            (bDisWidth>180) && (bDisWidth = 180);
            // 色块的宽度不能为负数
            if(disWidth<0){disWidth = 0; }
            (bDisWidth < 0) && (bDisWidth = 0);
            ylt_color.style.width = disWidth + "px";
            ylt_block.style.left = bDisWidth + "px";
            mym.volume = disWidth / 180 ;
        };
        ylt_block.addEventListener("mousedown",function(event){
            event.preventDefault(); // 阻止默认事件
            startX = event.clientX ; // 记录鼠标点下的开始x坐标（相对于窗口）
            // 鼠标滑动，写在页面上的。
            console.info(startX);
            document.addEventListener("mousemove", eMove);
        });
        document.addEventListener("mouseup",function(event){
           ylt_color_startWdith =  ylt_color.offsetWidth; //  松开鼠标后，记录当前色块的宽度。
            document.removeEventListener("mousemove", eMove);
        });

获取歌曲的总时长，和歌曲播放进度

// 总时长
        mym.addEventListener("loadedmetadata",function(){
            let hour = Math.floor (mym.duration / 3600);
            let other = mym.duration % 3600;
            let minute = Math.floor (other / 60);
            let second = Math.floor(other % 60);
            (hour<10)&&(hour = "0" + hour);
            (minute<10)&&(minute = "0" + minute);
            (second<10)&&(second = "0" + second);
            totalTime.innerHTML = hour + ':' + minute + ':' + second;
        })；
        // 当前播放进度，结合 timeupdate事件
        mym.addEventListener("timeupdate",function(){
            let hour = Math.floor (mym.currentTime / 3600);
            let other = mym.currentTime % 3600;
            let minute = Math.floor (other / 60);
            let second = Math.floor(other % 60);
            (hour<10)&&(hour = "0" + hour);
            (minute<10)&&(minute = "0" + minute);
            (second<10)&&(second = "0" + second);
            current.innerHTML = hour + ':' + minute + ':' + second;
            jindu_color.style.width = 100*mym.currentTime/mym.duration + "%";
        });

歌曲进度条的快进

//进度条（快进、后退）
        let jMove = function(){
            let x = event.offsetX;
            jindu_color.style.width = x + "px";
            mym.currentTime=""+parseInt(x*mym.duration/440)+"";
        };
        jindu_bg.addEventListener('mousedown',function () {
            let  mouseX = event.offsetX ;
            jindu_color.style.width = mouseX + "px";
            mym.currentTime=""+parseInt(mouseX*mym.duration/440)+"";
            jindu_bg.addEventListener("mousemove",jMove);
        });
        jindu_bg.addEventListener("mouseup",function(){
            jindu_bg.removeEventListener("mousemove",jMove);
        });
        jindu_bg.addEventListener("mouseleave",function(){
            jindu_bg.removeEventListener("mousemove",jMove);
        });

上一首、下一首的切换。

// 歌曲下一首切换
        forward.addEventListener("click",function(){
            count++;
            if(count>musicArr.length-1){
                count=0;
            }
            mym.src = musicArr[count];
            mname.innerHTML = musicArr[count];
        });
    
        // 歌曲上一首切换
        rewind.addEventListener('click',function () {
            count--;
            if(count === -1){
                count=musicArr.length-1;
            }
            mym.src = musicArr[count];
            mname.innerHTML = musicArr[count];
        });
        // 切换后播放
        mym.addEventListener("loadstart",function(){
            mym.play();
        });
        //播放完毕 自动播放
        mym.addEventListener("ended",function(){
            count++;
            if(count>musicArr.length-1){
                count=0;
            }
            mym.src = musicArr[count];
            mname.innerHTML = musicArr[count];
        });

最后完成了音乐播放的基本功能。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6el8xMjM0_size_16_color_FFFFFF_t_70]: /images/20220215/cb18675d3d26463aa96fcd52b81d8add.png