欢迎光临小鱼网个人网站!

登录/注册
html简单音乐播放器

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
<body>
<!--播放器-->
<audio id="song" autoplay="autoplay"></audio>
<!--整体结构-->
<div id="boxDiv">
    <!--歌词展示区域-->
    <div id="contentDiv">
        <!--歌词显示-->
        <div id="lrcDiv"></div>
        <!--上部阴影-->
        <span id="bgTopSpan"></span>
        <!--下部阴影-->
        <span id="bgBottomSpan"></span>
    </div>
    <!--控制区域-->
    <div id="controlDiv">
        <!--进度条-->
        <div id="progressDiv"></div>
        <!--进度条圆点-->
        <img id="pointerImg" src="img/audio/progress_pointer@2x.png"/>
        <!--播放时间-->
        <span id="playTimeSpan">00:00</span>
        <!--歌曲标题-->
        <span id="titleSpan"></span>
        <!--总时间-->
        <span id="totalTimeSpan">00:00</span>
        <!--按钮区域-->
        <div id="buttonDiv">
            <!--上一首按钮-->
            <img id="prevImg" src="img/audio/play_above_song@2x.png"/>
            <!--播放暂停按钮-->
            <img id="playOrPauseImg" src="img/audio/play@2x.png"/>
            <!--下一首按钮-->
            <img id="nextImg" src="img/audio/play_next_song@2x.png"/>
        </div>
    </div>
</div>
</body>
</html>

css部分

body{margin: 0px;background-color: #ccc;}
#boxDiv{width: 375px;height: 568px;margin: 10px auto;position: relative;}
#contentDiv{width: 375px;height: 460px;background-image: url(../img/audio/play_bg@2x.png);overflow: hidden;}
#lrcDiv{margin-top: 260px;}
#lrcDiv span{display: block;line-height: 40px;text-align: center;color: white;font-size: 20px;}
#bgTopSpan{position: absolute;display: block;width: 375px;height: 30px;top: 0px;background-image: url(../img/audio/play_top_shadow@2x.png);}
#bgBottomSpan{top: 430px;position: absolute;background-image: url(../img/audio/play_bottom_shadow@2x.png);display: block;width: 375px;height: 30px;}
#controlDiv{width: 375px;height: 180px;position: relative;background-color: white;}
#progressDiv{background-color: red;height: 1.5px;width: 0px;}
#pointerImg{width: 18px;height: 18px;position: absolute;top: -8.5px;left: -3px;}
#playTimeSpan{display: block;position: absolute;font-size: 14px;width: 35px;top: 5px;left: 5px;}
#totalTimeSpan{display: block;position: absolute;font-size: 14px;width: 35px;top: 5px;left: 335px;}
#titleSpan{display: block;position: absolute;height: 30px;width: 295px;font-size: 20px;text-align: center;left: 40px;top: 5px;}
#buttonDiv{margin-top: 40px;position: relative;}
#prevImg{width: 40px;height: 40px;position: absolute;top: 20px;left: 60px;}
#playOrPauseImg{width: 70px;height: 70px;position: absolute;top: 5px;left: 152px;}
#nextImg{width: 40px;height: 40px;position: absolute;top: 20px;left: 275px;}

js部分

$(function(){
    // 歌曲列表
    var playList = ["红日", "狼的诱惑", "漂洋过海来看你"];
    // 当前播放的歌曲序号
    var currentIndex = 0;
    // 播放器的原生对象
    var audio = $("#song")[0];
    // 播放时间数组
    var timeArr = [];
    // 歌词数组
    var lrcArr = [];
    // 调用播放前设置
    setup();
    // 播放歌曲
    playMusic();
    // 播放歌曲
    function playMusic(){
    // 播放歌曲
    audio.play();
    // 设置为暂停的图片
    $("#playOrPauseImg").attr("src", "img/audio/pause@2x.png");
    }
    // 歌曲播放前设置
    function setup(){
        // 设置播放哪一首歌曲
        // img/audio/红日.mp3
        audio.src = "img/audio/" + playList[currentIndex] + ".mp3";
        // 设置歌曲的名字
        $("#titleSpan").text(playList[currentIndex]);
        // 设置歌词
        setLrc();
    }
    // 设置歌词
    function setLrc(){
        // 清空上一首的歌词
        $("#lrcDiv span").remove();
        // 清空数组
        timeArr = [];
        lrcArr = [];
        // 加载歌词文件
        $.get("img/audio/" + playList[currentIndex] + ".lrc", {}, function(data){
            if(data){
                // 按行切割字符串
                var arr = data.split("\n");
                // 分割歌词
                for (var i = 0; i < arr.length; i++) {
                    // 分割时间和歌词
                    var tempArr = arr[i].split("]");
                    if (tempArr.length > 1){
                        // 添加时间和歌词到数组
                        timeArr.push(tempArr[0]);
                        lrcArr.push(tempArr[1]);
                    }
                }
                // 显示歌词
                for (var i = 0; i < lrcArr.length; i++) {
                    $("#lrcDiv").append("<span>"+lrcArr[i]+"</span>");
                }
             }
        });
    }
    // 播放暂停事件
    $("#playOrPauseImg").click(function(){
        // 如果播放器是暂停状态
        if(audio.paused){
            // 继续播放
            playMusic();
        }else{
            // 暂停
            audio.pause();
            // 变成播放的图片
            $("#playOrPauseImg").attr("src", "img/audio/play@2x.png");
        }
    });
    // 上一首
    $("#prevImg").click(function(){
        // 如果是第一首,那么跳到最后一首
        if(currentIndex == 0){
            currentIndex = playList.length - 1;
        }else{
            currentIndex--;
        }
        // 播放前设置
        setup();
        // 播放
        playMusic();
    });
    // 下一首
    $("#nextImg").click(function(){
        // 如果是最后一首,就跳到第一首
        if(currentIndex == playList.length - 1){
            currentIndex = 0;
        }else{
            currentIndex++;
        }
        // 播放前设置
        setup();
        // 播放
        playMusic();
    });
    // 监听播放器播放时间改变事件
    audio.addEventListener("timeupdate", function(){
        // 当前播放时间
        var currentTime = audio.currentTime;
        // 总时间
        var totalTime = audio.duration;
        // 当是数字的时候
        if(!isNaN(totalTime)){
            // 得到播放时间与总时长的比值
            var rate = currentTime / totalTime;
            // 设置时间显示
            // 播放时间
            $("#playTimeSpan").text(getFormatterDate(currentTime));
            // 总时长
            $("#totalTimeSpan").text(getFormatterDate(totalTime));
            // 设置进度条
            $("#progressDiv").css("width", rate * 375 + "px");
            // 设置进度圆点
            $("#pointerImg").css("left", (375 - 15) * rate - 3 + "px");
            // 设置歌词的颜色和内容的滚动
            for (var i = 0; i < timeArr.length - 1; i++) {
                if(!isNaN(getTime(timeArr[i]))){
                    // 当前播放时间大于等于i行的时间,并且小于下一行的时间
                    if (currentTime >= getTime(timeArr[i]) && currentTime < getTime(timeArr[i+1])){
                        // 当前行歌词变红色
                        $("#lrcDiv span:eq("+i+")").css("color", "#FF0000");
                        // 其他行歌词变白色
                        $("#lrcDiv span:not(:eq("+i+"))").css("color", "#FFFFFF");
                        // 当前行歌词滚动
                        $("#lrcDiv").stop(false, true).animate({"margin-top": 260 - 40 * i + "px"}, 1000);
                    }
                }
            }
        }
    });
    function getTime(timeStr){
        // 去掉左边的[
        var arr = timeStr.split("[");
        if(arr.length > 1){
            // 得到右边的时间
            var str = arr[1];
            // 分割分、秒
            var tempArr = str.split(":");
            // 分
            var m = parseInt(tempArr[0]);
            // 秒
            var s = parseFloat(tempArr[1]);
            return m * 60 + s;
        }
        return 0;
    }
    // 格式化时间(00:00)
    function getFormatterDate(time){
        // 分
        var m = parseInt(time / 60);
        // 秒
        var s = parseInt(time % 60);
        // 补零
        m = m > 9 ? m : "0" + m;
        s = s > 9 ? s : "0" + s;
        return m + ":" + s;
    }
});


Copyright © www.xyubing.com All Rights Reserved. 备案号:蜀ICP备19023461号-1

免责声明:本站部分资源搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。