JQuery音乐播放器（js菜鸟功能还很不全。。）

最新推荐文章于 2022-04-15 13:43:22 发布

霉鼓励

最新推荐文章于 2022-04-15 13:43:22 发布

阅读量303

点赞数

文章标签： JQuery

本文链接：https://blog.csdn.net/weixin_41411644/article/details/98495737

版权

在网上看了参考关于播放器的相关代码，然后做了个摘抄、整合以及修改
可能整合的不是很理想，进度条的拖动没搞出来。总之，请大家伙多多指教哈。
emmmm。。。暂时这样吧[/苦笑]
暂时实现的功能：

播放歌曲（修改src）
暂停
进度条
显示歌曲时间
左边图片旋转

由于本人是个挺注重美观的人，所以简洁舒服的小界面如下：
在这里插入图片描述

小图标使用的是阿里的Iconfont图标库，大伙儿可以挑自己喜欢的因此在开头引入了iconfont.css文件（下载图标代码的时候的文件里有）我这里用到了Bootstrap和Jquery，记得引入下。
接下来就贴代码了。
index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="css/audio.css" rel="stylesheet">
    <link href="css/iconfont.css" rel="stylesheet">
    <script src="js/audio.js"></script>
</head>
<body>
    <div class='MusicPanel'>
        <div class='PanelLeft'>
            <div class='circle'>
                <img class="anim" src="img/1.png"></img>
            </div>
        </div> 
        
        <div class='PanelRight'>
        <!-- 上一首按钮 -->
            <div class='Prev'>
                <span class="iconfont prev">&#xe649;</span>
            </div> 
         <!-- 播放/暂停 -->
            <div id='Play' class='Play'>
                <span class="iconfont play">&#xe66b;</span>
            </div> 
        <!-- 下一首按钮 -->
            <div class='Next'>
                <span class="iconfont next">&#xe648;</span>
            </div> 
        <!-- 歌曲信息 -->
            <div class="Song">
                <span class='SongName'>shake it off</span>
                </br>
                <span class="SongAuthor">Taylor Swift</span>
            </div> 
        <!-- 进度条 -->
            <div class="Process">
                <div class="ProcessAll" ></div> 
                <div class="ProcessNow"></div>
                <div class="SongTime">00:00&nbsp;|&nbsp;00:00</div>
            </div> 
        </div> 
    </div> 
</body> 
</html>

audio.css文件:

.MusicPanel{
    width: 400px;
    height: 150px;
    margin: 200px auto;
    box-shadow: 0px 2px 10px 0px rgba(84, 73, 243, 0.747), 0px 2px 10px 0px rgba(84, 73, 243, 0.747);

}
.MusicPanel .PanelLeft{
    width: 100px;
    height: 150px;
    display: inline-block;
    text-align: center;
    background: #069ff8;
    
}
.MusicPanel .PanelRight{
    width: 260px;
    height: 80px;
    display: inline-block;
    padding: 10px 20px;
    position: absolute;
    background: #fdfef6;
}
.Prev,.Play,.Next{
    display: inline-block;
    margin-right: 5px;
}
.Prev,.Next{
    filter:alpha(opacity=30); 
    -moz-opacity:0.3; 
    opacity:0.3;
    cursor: not-allowed;
}
.Prev:hover,.Next:hover{
    filter:alpha(opacity=30); 
    -moz-opacity:0.3; 
    opacity:0.3;
    cursor: not-allowed;
}
.Song{
    display: inline-block;
    padding-left: 75px;
}

.SongTime,
.SongAuthor,
.SongName{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.SongTime{
    float: right;  
    font-size: 14px;
    color:#393b4b;
}
.Song:hover{
    cursor: default;
}
.SongAuthor{
    color:#393b4b;
    font-size: 13px;
}
.SongName{
    color:#393b4b;
    font-size: 18px;
}

.PanelLeft .circle{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-top: 50%;
    line-height: 40px;
    border-radius: 50%; 
    border:1px solid white;
    transition:0.3s;
}

.circle{
    color:white;
    transition:0.05s;
    
}
.circle:hover{
    cursor: pointer;    
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.6), 0px 2px 10px 0px rgba(0, 0, 0, 0.4);
    background: #069ff8;
    border:1px solid #069ff8;
}
.Process{
    margin-top: 15px;
}
.ProcessAll{
    width: 260px;
    float: left;
    height: 3px;
    cursor: pointer;
    background-color:rgba(0,0,0,0.2);   
}
.ProcessNow{
    width: 0px;
    float: left;
    position: absolute;
    height: 3px;
    cursor: pointer;
    background-color: #069ff8;   
}
.anim {
    border-radius:50%;
    width:100%;
    height:100%;

}
.prev,
.play,
.next{
    color: rgb(2, 62, 90);
}

这里就是核心js代码部分，audio.js文件：

/**
 * parseInt() 函数可解析一个字符串，并返回一个整数。
 *  currentTime 属性设置或返回音频/视频播放的当前位置（以秒计）
 * duration 属性返回当前音频的长度，以秒计。
 * */
$(document).ready(function() {
    var timeout;
    var audio = document.createElement('audio');
    audio.src = "./mp3/Taylor swift- Shake It Off.mp3";
    // 点击播放/暂停按钮事件
    $("#Play").on('click',function () {
        if(!audio.paused){
            $("#Play").children("span").html("&#xe66b;");
            Pause();
        }
        else{           
            $("#Play").children("span").html("&#xe61f;");
            Play();    
            }           
    });
    //控制进度条
    
    // // $('.ProcessNow').on('click',function(t){
    //        没写出来[/哭哭唧唧]
     
    // // })
    // 播放函数
    function Play() {
        audio.play();
        TimeSpan(); 
        Anim(1);
    } 
    //暂停函数
    function Pause() {  
        audio.pause();
        Anim(0);
    } 
    //显示事件函数
    function TimeSpan() {
        var ProcessNow = 0;
        setInterval(function () {
            var ProcessNow = (audio.currentTime / audio.duration) * 260;
            $(".ProcessNow").css("width", ProcessNow);
            var currentTime = timeFormat(audio.currentTime);
            var timeAll = timeFormat(TimeAll());
            $(".SongTime").html(currentTime + " | " + timeAll);
            }, 1000);
    }  
    //计算时间的函数
    function timeFormat(number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute >= 10 ? minute : "0" + minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    } 
    //整首歌曲函数
    function TimeAll() {
        return audio.duration; 
    } 
    //图片旋转函数
    function Anim(state){
   
        if(state){
            startAnim();
        }
        else{
           stopAnim();
        }
       
    //开始旋转
        function startAnim(){ 
             var rotate = 0;
            timeout = setInterval(function(){
                var styleRotate = "rotate("+ rotate +"deg)";
                $(".anim").css({
                    "transform": styleRotate,
                    "-moz-transform": styleRotate, /* IE 9 */
                    "-webkit-transform": styleRotate/* Safari and Chrome */
                })
                //旋转增加的角度
                rotate += 6;
                if (rotate > 360) {
                    rotate = 0;
                }
                //判断歌曲是否已结束，结束则停止图片旋转
                if(audio.ended) {
                    stopAnim();
                    $(".anim").css({
                        "transform": "rotate(0 deg)",
                        "-moz-transform": "rotate(0 deg)", /* IE 9 */
                        "-webkit-transform": "rotate(0 deg)"/* Safari and Chrome */
                    })
                }

            },30)
            
        }       
        //清除时钟，停止旋转
        function stopAnim() {           
            clearInterval(timeout);
            timeout = null;           
        }        
    }    
})

霉鼓励

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery音乐播放器（js菜鸟功能还很不全。。）

在网上看了一些关于播放器的相关代码，然后做了个摘抄、整合以及修改可能整合的不是很理想，进度条的拖动没搞出来。总之，请大家伙多多指教哈。emmmm。。。暂时这样吧[/苦笑]由于本人是个挺注重美观的人，所以简洁舒服的小界面如下：小图标使用的是阿里的Iconfont图标库，大伙儿可以挑自己喜欢的因此在开头引入了...
复制链接

扫一扫