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).