Audio and Video labels

Introduction The Video and Audio labels are newly added to the H5 and are used for multimedia playback on web pages. We can control the playback of audio and video by introducing an external SRC address and adding controls to the tag.

// SRC imports local media files<audio src="Local path.mp3" controls ></audio>// Resources in the audio/video tag can be specified with the SRC attribute as well as the source tag, and can be specified in multiple ways, which can be used to solve some compatibility problems.<video controls>
    <source src="resource/3.mp4">
    <source src="resource/e3a.mp4">
  </video>
Copy the code

Safari only supports MP4; Internet Explorer 8 or below does not support the video and audio labels. IE high version only supports MP4 format; Firefox, Google support MP4, WebM, OGV and more.

Attributes of tags

width/height	controls	poster	autoplay	muted	loop
Video shows the width and height of the area	User control interface	Video cover	Automatically play	If quiet	Loop for

Note autoplay (IE works fine, Chrome, Edge only works on mute)

Other related attributes

currentTime	volume+-	.paused	.ended
The time on the current timeline	The volume to add and subtract	Suspend true or unsuspend false	The playback ends true or not false

Methods of audio and video objects

play()	psuse()	load()
play	suspended	Reload the

Related events

. HTML and CSS.........../ / to get
    let v = document.querySelector("video");
    // Triggered when the video is reloaded.
    v.onabort = function () {
      console.log(1);
    }
    // Trigger when playing ends
    v.onended = function(){
      // When the video is finished, play the next video
      v.src = "resource/2.mp4";
      v.play();
    }
    // Play pause triggered
    v.onpause = function () {
      alert("Suspended")}// Triggered when playing starts
    v.onplay = function(){
      console.log("play");
    }
    // Triggered when the play has already started (when it starts, after it pauses and resumes, after it ends).
    v.onplaying = function(){
      console.log("It's playing. Don't blink.");
    }
    // Time changes in the timeline
    v.ontimeupdate = function(){
      console.log("Time has changed");
    }
Copy the code

The Music Box Case

Style renderings

HTML part

 <div class="content">
        <div class="singerContent clearfix">
            <div class="album fl">
                <div class="albumImg">
                    <a href="javascript:;" class="fl">
                        <img src="Album cover of Songs" alt="">
                    </a>
                </div>
                <div class="btnArea2 clearfix">
                    <a class="btnDownloadClient"></a>
                </div>
            </div>
            <div class="songContent fl">
                <div class="songName clearfix" title=""><span class="audioName" title="Song Title">The song name</span>
                    <span class="icon btnMv"></span>
                </div>
                <div class="songDetail clearfix">
                    <p class="albumName fl">
                        <span class="fontColor">Album:</span>
                        <a href="javascript:;">The song name</a>
                    </p>
                    <p class="singerName fl" title="SWIN-S"><span class="fontColor">Singer:</span><a href="javascript:;">Singer name</a></p>
                </div>

                <div class="songWordContent">
                    <! -- Lyrics part -->
                    <div class="jspPane">
                    </div>
                </div>
            </div>
        </div>
        <div class="blurBgMask"></div>
        <div id="blurBg"></div>
    </div>
    <audio src="Song MP3 file path" controls></audio>
    <script src="js/jquery.min.js"></script>
    <script src="data/data.js"></script>
    <script src="js/coolyou.js"></script>

Copy the code

The CSS part

/* Clear the default style */
* {
    margin: 0;
    padding: 0;
}
/* Container panel */
.content{
    width: 100%;
    height: 650px;
    position: relative;
    background: # 000;
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
/* Clear float */
.clearfix::after{
    display: block;
    content: "";
    clear: both;
}
/* Main panel style */
.content .singerContent {
    margin-top: 100px;
    z-index: 100;
    position: absolute;
    left: 50%;
    width: 840px;
    margin: 100px 0 0 -390px;
}
#blurBg{
    background-image: url("Song Album Cover Path"); 
    height: 720px;
}
.content #blurBg {
    width: 100%;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    filter: blur(90px);
    background-repeat: no-repeat;
    background-size: cover;
}
.content .album {
    width: 262px;
}
.fl{
    float: left;
}
.content .songContent {
    width: 460px;
    min-height: 500px;
    margin-top: -7px;
    margin-left: 116px;
}
.content .albumImg {
    width: 262px;
    height: 262px;
    margin-bottom: 25px;
}
.content .albumImg img {
    border: none;
    width: 260px;
    height: 260px;
}
.btnDownloadClient {
    display: block;
    width: 230px;
    height: 50px;
    background: url(../img/downlaod_bg.png) no-repeat;
    cursor: pointer;
}
.content .btnArea2 {
    margin-top: 40px;
    padding-left: 16px;
}
.btnDownloadClient:hover {
    background-position: -231px 0;
}
.content .songContent .songName {
    font-size: 24px;
    font-style: normal;
    color: #fff;
    width: 460px;
}
.btnMv {
    float: left;
    width: 25px;
    height: 13px;
    margin: 15px 0 0 10px;
}
.icon {
    cursor: pointer;
    background: url(../img/btn.png) 0 -214px;
    background-repeat: no-repeat;
}

.audioName {
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.content .songContent .songDetail .albumName {
    margin-right: 10px;
}
.content .songContent .songDetail .albumName..content .songContent .songDetail .singerName {
    display: block;
    width: 225px;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    color: #fff;
}
.fontColor {
    opacity:.6;
}
.content .songContent .songDetail .albumName a ,.content .songContent .songDetail .singerName a {
    float: none;
    color: #fff;
    padding-right: 5px;
}
a {
    text-decoration: none;
    outline: none;
}
.content .songContent .songWordContent{
    outline: 0;
    height: 410px;
    margin-top: 17px;
    overflow: hidden;
    font-size: 15px;
    color: #fff;
    line-height: 30px;
    width: 410px;
    position: relative;
}
.content .songContent .songWordContent p.playOver{
    color: #01e5ff;
    opacity: 1;
}
.jspPane{
    position: absolute;
    transition: top 0.3 s linear;
}
.content .songContent .songWordContent p{
    width: 420px;
    height: 34px;
    font-size: 15px;
    white-space: normal;
    overflow: hidden;
    text-overflow:ellipsis;
    opacity: 0.6;
    display: flex;
}
audio {
    width: 300px;
    display: block;
    margin: 0 auto;
}
.content #blurBg..content .blurBgMask {
    width: 100%;
    height: 100%;
    opacity:.6;
}
.content .blurBgMask {
    background-color: #292a2b;
    background-color: rgba(0.0.0.35);
    z-index: 10;
}
Copy the code

Js part

/* Split the lyrics: one array for the time, one array for the lyrics, the lyrics need to be LRC file, one time for the corresponding lyrics */
let timeArr = [];  // Time array
let lrcArr = []; // Array of lyrics
// Regex +while loop
let reg = /\[(\d{2}:\d{2})\.\d{2}\](.+)/g;
let res = reg.exec(lrcStr);// Get one piece of data (multiple calls can get multiple pieces of data in sequence)
// When an RES has no data, it is no longer executed, so all data can be retrieved
while(res){
  timeArr.push(res[1]);
  lrcArr.push(res[2]);
  res = reg.exec(lrcStr)
}
// Reg +for loop branch
// let res = lrcStr.split(/\n\[|\]/);
// res.shift();
// console.log(res);
// for (var i = 0; i < res.length; i++) {
// if(i%2){
/ / / / odd number
// lrcArr.push(res[i])
// }else{
/ / / / even
// timeArr.push(res[i]);
/ /}
// }

// Display all lyrics to the page
for (let i = 0; i < lrcArr.length; i++) {
  $(".jspPane").append(`<p>${lrcArr[i]}</p>`);
}

// Trigger when the timeline changes (trigger whenever playing)
$("audio").on("timeupdate".function(){
  // Get the current timeline event this.currentTime
  // The original format 01:05:44 needs to be converted to 01:05. Note that the time is 60 base 65s = 01:05
  let m = parseInt(this.currentTime/60);/ / points
  let s = parseInt(this.currentTime % 60);/ / SEC.
  // add zero
  let str = `${m.toString().padStart(2."0")}:${s.toString().padStart(2."0")}`;
  // Find the array subscript for the current time
  for (let i = 0; i < timeArr.length; i++) {
     if (str == timeArr[i]) {
     // Add classes to the current timeline node and delete classes from other timeline nodes
       $(".jspPane p").eq(i).addClass("playOver").siblings().removeClass("playOver")
      // Move the jspPane up
      if (i>=4) {$(".jspPane").css("top",(i-4) * -34);
      }else{$(".jspPane").css("top".0); }}}})Copy the code

To sum up the principle of implementing the music box, we store the time of the song and the lyrics in two arrays respectively. After storing the time, we use the currentTime property of the audio to get the time on the timeline and make it match the time in our time array. If the match is successful, the subscript of the current time array is the same as that of the lyrics array. We use jQ to modify the corresponding style to complete a simple music box (in the above case, we only matched the unit of seconds).