JavaScript Development Mini Music player

Knowledge Points: html/css layout thinking, audio tag API application, CSS3 Custom animation, JS music playback control, lyrics synchronization and so on.

HTML code:

    <textarea id= "txt" style= "Display:none" > [00:00.64] Little Lucky-Tan Jiayi [00:02.15] Word: Xu Shijian & Wu hui Fu [00:03 .70] Qu: jerryc [00:04.14] arranger: jerryc [00:13.77] I heard the raindrops fall on the Green grass [00:19.89] I heard the bell rang in the distance [00:25.74] but I didn't hear        your voice [00:30.74] earnestly call my name [00:37.92] When I fell in love with you still do not understand feelings [00:44.12] parting to feel unforgettable [00:50.09] Why did not find you met [00:54.7] The best thing about life [01:00.30] may be busy smiling and crying [01:06.36] busy chasing a meteor in the sky [01:12.12] people take it for granted [01:16.55] Who is the wind in the rain has been silently guarding in situ [01:24.44] Originally you are I want to keep the lucky [01:29.69] originally we and love once so close [01:35.67] that for my decision against the world [01:40.29 The rain that accompanies me [01:43.28] A scene is your spotless heart [01:50.6] Meet you good luck [01:53.96] but I have lost the right to tears for you [01:59.98] I hope I don't see        Skyline [02:04.63] You open your wings [02:07.68] How lucky she will be to meet you [02:27.28] youth is a journey of stumbling [02:33.44] having the beauty of hindsight [02:39.55] Too late to thank you for giving me the courage [02:44.22] let me be myself [02:49.72] may be busy smiling and crying [02:55.55] busy chasing the stars in the sky [03:01.61 People take it for granted [03:06].03] Who is the wind in the rain has been silently guarding in situ [03:13.79] Originally you are I want to keep the lucky [03:19.05] originally we and love once so close [03:25.17] that for my decision against the world [03:29 .68] The rain that accompanies me [03:32.56] A scene is your spotless heart [03:39.89] Meet you good luck [03:43.4] but I have lost the right to tears for you [03:49.32] I hope in my Unseen Horizon [03:53.97] You open the wings [03:56.98] Meet your doomed [04:00.47]oh how lucky she will be </textarea> <div            class= "Photo" > <div class= "Top" ></div> <div class= "title" > Little Lucky </div> <div class= "singer" > Tan Jiayi </div> <div class= "Play" ></div> <div class= " LRC "> <div class=" Content "></div> </div> </div> <aud Io src= "mp3/Tan Jiayi-Little lucky. mp3" id= "MyMusic" ></audio>

CSS code:

    <style type= "Text/css" > *{margin:0;        padding:0;        } body{Background:rgb (55, 76, 86);            }. photo{width:320px;            height:600px;            margin:100px Auto;            Background: #000;            Font-family: "Microsoft Jas Black";            padding:5px;            Background-color: #222;            border-radius:20px;            box-shadow:0 0 7px #fff;        Overflow:hidden;            }. top{width:320px;            height:23px;        Background:url ("Images/1.png") no-repeat;            }. title{width:320px;            height:30px;            Background:url ("Images/2.png") no-repeat;            font-size:20px;            Color: #ccc;            Font-weight:bold;            Text-align:center;        line-height:30px;            }. play{width:190px;            height:190px;            Background:url ("Images/3.png") no-repeat; Margin:autO        border-radius:50%;            }. singer{width:320px;            font-size:14px;            Color: #ccc;            Text-align:center;        line-height:40px;            }. lrc{width:300px;            height:285px;            margin:20px Auto;            Text-align:center;            Overflow:hidden;        Color: #ccc;            }. LRC p{line-height:20px;        font-size:12px;            }. content{position:relative;            left:0;        top:0;            }. play.rotate{-webkit-animation:rot 5s linear infinite;            -moz-animation:rot 5s linear Infinite;            -ms-animation:rot 5s linear Infinite;            -o-animation:rot 5s linear Infinite;        Animation:rot 5s linear Infinite;            } @keyframes rot{from{transform:rotate (0deg);}        To{transform:rotate (360deg);} } </style>

JavaScript code:

    <script type= "Text/javascript" >//window.onload=function () {} after page load execute var btn = document.getelementsbyclassn Ame ("Play") [0];//is stored in the form of a class class name to get an array of elements [] var mymusic = document.getElementById ("MyMusic");//via id var txt = docume    Nt.getelementbyid ("txt"); var con = document.getelementsbyclassname ("content") [0] var mark = true;//Boolean true true false false Btn.onclick = function            () {if (mark)//Implicit conversion i > 1 {this.classname + = "rotate";        Mymusic.play ();//play music Mark = false;            }else{this.classname = "Play";        Mymusic.pause ();//Music Pause Mark = true;    }} var lrc = Txt.value;    var Lrcarr = Lrc.split ("[");//starting from which character, separate the array of var html = ""; for (var i = 0;i<lrcarr.length; i++) {var arr = lrcarr[i].split ("]");//delimited lyrics with time var = arr[0].spl It ("."); /separating milliseconds from other time var timer = time[0].split (":");//separating minute and second var ms = timer[0]*60 + timer[1]*1;//conversion to seconds//The string type multiplied by the number type translates into the number type var text = arr[1];//Gets the lyrics section if (text) {html + = "<p id=" +ms+ ">" +text+ "</p        > ";    } con.innerhtml = html;    } var num = 0; var OP = con.getelementsbytagname ("P");//Get all P element Mymusic.addeventlistener ("Timeupdate", function () {var curT) by tag name IME = parseint (this.currenttime);//Gets the song playback time in Seconds if (document.getElementById (Curtime)) {for (V Ar i = 0;i<op.length; i++) {op[i].style.csstext = "color: #ccc; font-size:12px;"             Restore all lyrics styles before playing the next sentence} document.getElementById (curtime). Style.csstext = "COLOR:RED;FONT-SIZE:18PX;"                if (op[7+num].id = = curtime) {con.style.top = -20*num + "px"; Num ++;//}});//Monitor </script>

Interested in learning to learn the Web front end can come to the Web front end Qun "189394454" can get 2018 of the latest web front-end learning materials for free.
Follow the public number → ' Learn the web front end ' to open your Web front end learning Path

JavaScript Development Mini Music player