qq音乐播放小Demo

最新推荐文章于 2020-04-24 23:18:11 发布

孤影_ls

最新推荐文章于 2020-04-24 23:18:11 发布

阅读量456

点赞数

分类专栏： # JS Demo 文章标签： css javascript html

本文链接：https://blog.csdn.net/Sheng_zhenzhen/article/details/103944326

版权

JS Demo 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script>
        (function () {
            function computedFont() {
                let winW = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = winW/750*100+"px";
            }
            computedFont();
            window.addEventListener("resize",computedFont)
        })();
    </script>
</head>
<body>
<div  class="container">
    <audio src="img/myDream.m4a" id="music"></audio>
    <div class="imgBg"></div>
    <div class="bg"></div>
    <header class="header">
        <div class="content">
            <img src="img/myDream.jpg" alt="">
            <h3>
                <span>我的梦</span>
                <span>张靓颖</span>
            </h3>
        </div>
        <a href="javascript:;" id="musicBtn"></a>
    </header>
    <main class="main">
        <div class="wrap">
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
            <p>明天会更好</p>
        </div>
    </main>
    <footer class="footer">
        <div class="progress">
            <div class="proBg">
                <div class="lineBg"></div>
            </div>
            <span id="left">00:00</span>
            <span id="right">00:00</span>
        </div>
        <a href="##" id="down">下载这首歌曲</a>
    </footer>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/index1.js"></script>
</body>
</html>

css


html,body{
    width:100%;
    height:100%;
}
.container{
    width:100%;
    height:100%;
}
.container .imgBg,.container  .bg{
    position: absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:-2;
}
.container .imgBg{
    background: url("../img/myDream.jpg") no-repeat;
    background-size: cover;
    /*模糊度*/
    filter:blur(7px);
}
.container  .bg{
    background: rgba(0,0,0,0.2);
}
/*header的样式*/
.header{
    width:100%;
    padding:0.3rem;
    box-sizing: border-box;
    background: rgba(0,0,0,0.3);
    position: relative;
}
.header .content img{
    width:1.2rem;
    height:1.2rem;
}
.header .content h3{
    display: inline-block;
    /* 把元素的顶端与行中最高元素的顶端对齐*/
    vertical-align: top;
}
.header .content span{
    color:white;
    display: block;
}
.header .content span:nth-child(1){
    font-size: 0.45rem;
}
.header #musicBtn{
    position: absolute;
    right:0.3rem;
    top:50%;
    margin-top: -0.3rem;
    display: inline-block;
    width:0.6rem;
    height:0.6rem;
    background: url("../img/music.svg") no-repeat;
    background-size:100% 100%;
}
.header #musicBtn.select{
    animation: move 2s linear infinite;
}
@keyframes move {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
/*main部分*/
.main{
    width:100%;
    /* height:9rem; */
    padding:0.3rem;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.main .wrap{
    position: absolute;
    width:96%;
    top:0;
    transition: all 0.5s linear;
}
.main .wrap  p{
    width:100%;
    text-align: center;
    line-height: 0.84rem;
    height:0.84rem;
    color:rgba(255,255,255,0.6);
    font-size: 0.4rem;
}
.main .wrap  p.select{
    color:#31C27C;
}
/*footer的样式*/
.footer{
    width:100%;
    position: relative;
}
.footer .progress{
    position: relative;
}
.footer .progress .proBg{
    width:65%;
    margin:auto;
    height:0.04rem;
    background: rgba(255,255,255,0.5);
}
.footer .progress .proBg .lineBg{
    height:0.04rem;
    width:0;
    background: #31C27C;
}
.footer .progress span{
    color:rgba(255,255,255,0.5);
    position: absolute;
    top:-0.15rem;
}
.footer .progress #left{
    left:0.5rem;
}
.footer .progress #right{
    right:0.5rem;
}
.footer #down{
    display: block;
    width:60%;
    height:1rem;
    line-height: 1rem;
    text-align: center;
    color:white;
    font-size: 0.4rem;
    border-radius: 0.5rem;
    margin:0 auto;
    background: url("../img/sprite_play.png") 0.2rem -5.86rem no-repeat #31C27C;
    background-size:0.8rem 7rem;
}

js

let music = $("#music")[0];
let timer;
//1. 计算出内容区的高度，动态设置
function computedMain(){
    // 用屏幕的高度-header的高度-footer的高度来计算main的高度；
    let winH = document.documentElement.clientHeight;
    let headerH = $(".header")[0].offsetHeight;
    let footerH = $(".footer")[0].offsetHeight;
    // 获取最新的fontSize值；
    let fontSize = parseFloat(document.documentElement.style.fontSize);
    // debugger
    let mainH  = (winH-headerH-footerH)/fontSize+"rem"; 
    // console.log(mainH);
    $(".main").css("height",mainH);
}
computedMain();

// 2.请求数据，并绑定数据
$.ajax({
    url:"./json/lyric.json",
    type:"get",
    async:false,
    success:function(data){
        // 将data中属性名是lyric的属性值传递给bindHtml;
        bindHtml(data.lyric);
    }
});

// 3.数据绑定
function bindHtml(data){
    data=data.replace(/&#(\d+);/g,function(res,a){
        switch(a){
            case "32":
                return " ";
            case "40":
                return "(";
            case "41":
                return ")";
            case "45":
                return "-";
        }
        return res;
    });
    let arr = [];
    data.replace(/\[(\d+)&#58;(\d+)&#46;\d+\]([^&#]+)(?:(&#\d+))/g,function(res,a,b,val){
        arr.push({
            a,
            b,
            val
        });
    });
    // 循环准备好的数组，拼接字符串，并放入wrap这个元素中；
    let str=``;
    for(let i=0;i<arr.length;i++){
        let cur = arr[i];
        str+=`<p data-min="${cur.a}" data-sec="${cur.b}">${cur.val}</p>`
    }
    $(".wrap").html(str);
    music.addEventListener("canplay",function(){
        // 当音频加载完毕，会执行这个元素的canplay事件；
        $("#right").html(formate(music.duration));
    });
}
// 3.给按钮绑定点击事件；如果当前是暂停状态，就让其播放，如果是播放状态，就让其暂停
// tap： 没有延迟；
$("#musicBtn").tap(function(){
    if(music.paused){
         music.play();
         $(this).addClass("select");
         timer=setInterval(computedTime,100);
         return;
    }else{
        music.pause();
        $(this).removeClass("select");
        clearInterval(timer);
        return;
    }
});
function formate(time){// time : 是秒；返回一个分钟:秒
    let min = Math.floor(time/60);
    let sec = Math.floor(time%60);
    min = min<10?"0"+min:min;
    sec=sec<10?"0"+sec:sec;
    return min+":"+sec;
}
// audio :currentTime
let curT = 0;
let flag = 0;
function computedTime(){
    let curTime = music.currentTime;
    let duration = music.duration;
    let cur = formate(curTime);// "00:16"
    if(curTime>=duration){
        // 播放完以后的执行
        clearInterval(timer);
        $("#musicBtn").removeClass("select");
        $(".wrap").css("top", 0);
        return;
    }
    $("#left").html(cur);
    $(".lineBg").css("width",curTime/duration*100+"%");
    let min = cur.split(":")[0];
    let sec = cur.split(":")[1];
    // 获取到所有的p元素；
    let allP = document.getElementsByTagName("p");
    for(let i=0;i<allP.length;i++){
        let curP = allP[i];
        // 获取当前行分钟以及秒数
        let minP = curP.getAttribute("data-min");// 00  01
        let secP = curP.getAttribute("data-sec");
        // 让左下角的时间和这个行上的时间进行比较，如果相同，音乐已经播放到了这一行，加颜色
        if(min===minP&&sec===secP){
            // 只要这一行加
            //curP.removeAttribute("data-min");
            if(curP.className!=="select"){
                //console.log(curP.className);
                //flag++;
                $(curP).addClass("select").siblings().removeClass("select");
                // i : 第几个p元素；
                if(i>=6){
                    curT-=0.84;
                    $(".wrap").css("top",curT+"rem");
                }
            }
            
        }
    }

}

json

{
  "retcode": 0,
  "code": 0,
  "subcode": 0,
  "type": 1,
  "songt": 0,
  "lyric": "[ti&#58;《我的梦》]&#10;[ar&#58;张靓颖]&#10;[al&#58;]&#10;[by&#58;]&#10;[offset&#58;0]&#10;[00&#58;01&#46;36]我的梦&#32;&#40;华为手机主题曲&#41;&#32;&#45;&#32;张靓颖&#10;[00&#58;02&#46;11]词：王海涛/张靓颖&#10;[00&#58;02&#46;64]曲：Andy&#32;Love&#10;[00&#58;03&#46;48]编曲：崔迪&#10;[00&#58;04&#46;49]&#10;[00&#58;08&#46;73]一直地一直地往前走&#10;[00&#58;11&#46;65]&#10;[00&#58;13&#46;02]疯狂的世界&#10;[00&#58;14&#46;58]&#10;[00&#58;16&#46;68]迎着痛把眼中所有梦&#10;[00&#58;20&#46;52]&#10;[00&#58;21&#46;03]都交给时间&#10;[00&#58;22&#46;71]&#10;[00&#58;24&#46;24]想飞就用心地去飞&#10;[00&#58;26&#46;98]谁不经历狼狈&#10;[00&#58;30&#46;68]&#10;[00&#58;31&#46;60]我想我会忽略失望的灰&#10;[00&#58;34&#46;99]拥抱遗憾的美&#10;[00&#58;39&#46;05]我的梦说别停留等待&#10;[00&#58;43&#46;94]就让光芒折射泪湿的瞳孔&#10;[00&#58;47&#46;74]映出心中最想拥有的彩虹&#10;[00&#58;51&#46;78]带我奔向那片有你的天空&#10;[00&#58;55&#46;74]因为你是我的梦&#10;[01&#58;01&#46;06]&#10;[01&#58;07&#46;19]我的梦&#10;[01&#58;08&#46;72]&#10;[01&#58;16&#46;75]执着地勇敢地不回头&#10;[01&#58;20&#46;29]&#10;[01&#58;21&#46;05]穿过了黑夜踏过了边界&#10;[01&#58;24&#46;87]路过雨路过风往前冲&#10;[01&#58;28&#46;39]&#10;[01&#58;28&#46;96]总会有一天站在你身边&#10;[01&#58;32&#46;52]泪就让它往下坠&#10;[01&#58;35&#46;00]溅起伤口的美&#10;[01&#58;38&#46;60]&#10;[01&#58;39&#46;55]哦别以为失去的最宝贵&#10;[01&#58;43&#46;00]才让今天浪费&#10;[01&#58;47&#46;04]我的梦说别停留等待&#10;[01&#58;51&#46;93]就让光芒折射泪湿的瞳孔&#10;[01&#58;55&#46;66]映出心中最想拥有的彩虹&#10;[01&#58;59&#46;75]带我奔向那片有你的天空&#10;[02&#58;03&#46;67]因为你是我的梦&#10;[02&#58;09&#46;14]&#10;[02&#58;11&#46;72]我的梦&#10;[02&#58;13&#46;09]&#10;[02&#58;15&#46;13]我的梦&#10;[02&#58;16&#46;64]&#10;[02&#58;19&#46;60]我的梦&#10;[02&#58;21&#46;39]&#10;[02&#58;24&#46;27]世界会怎么变化&#10;[02&#58;26&#46;58]都不是意外&#10;[02&#58;28&#46;33]记得用心去回答&#10;[02&#58;30&#46;52]命运的精彩&#10;[02&#58;32&#46;34]世界会怎么变化&#10;[02&#58;34&#46;51]都离不开爱&#10;[02&#58;36&#46;25]记得成长的对话&#10;[02&#58;38&#46;28]&#10;[02&#58;39&#46;11]勇敢地说我不再等待&#10;[02&#58;45&#46;63]就让光芒折射泪湿的瞳孔&#10;[02&#58;49&#46;75]映出心中最想拥有的彩虹&#10;[02&#58;53&#46;74]带我奔向那片有你的天空&#10;[02&#58;57&#46;73]因为你是我的梦&#10;[03&#58;02&#46;71]&#10;[03&#58;05&#46;51]我的梦&#10;[03&#58;07&#46;32]&#10;[03&#58;09&#46;20]我的梦&#10;[03&#58;14&#46;12]因为你是我的梦"
}