H5-Video和audio标签（音视频）

音视频标签

简介 Video和audio标签是H5新增的标签，常用于网页中的多媒体播放。我们可以通过引入外部的src地址，并为标签添加controls属性来控制音视频的播放。

 //src引入本地媒体文件
 <audio src="本地路径.mp3" controls ></audio>//controls可以控制媒体播放
 //音视频标签中的资源除了可以用src属性来指定外，还可以用 source标签，而且可以指定多个，可以用来解决某些兼容问题。
 <video controls>
    <source src="resource/3.mp4">
    <source src="resource/e3a.mp4">
  </video>
复制代码

兼容性 safari只支持MP4格式；IE8及以下不支持video和audio标签；IE高版本只支持mp4格式；火狐，谷歌支持mp4，webm，ogv等等。

标签的属性

width/height	controls	poster	autoplay	muted	loop
视频显示区域的宽高	用户控制界面	视频封面	自动播放	是否静音	循环播放

注意 自动播放(IE下可以正常使用，chrome，edge只有在静音下可以使用)

其他相关属性

currentTime	volume+-	.paused	.ended
当前时间轴上的时间	音量加减	暂停true或未暂停false	播放结束true或未结束false

音视频对象的方法

play()	psuse()	load()
播放	暂停	重新加载

相关的事件

    ......html、css部分...........
    //获取
    let v = document.querySelector("video");
    //在视频被重新加载时触发。
    v.onabort = function () {
      console.log(1);
    }
    //播放结束后触发
    v.onended = function(){
      //播放完成后，播放下一个 视频
      v.src = "resource/2.mp4";
      v.play();
    }
    //播放暂停触发
    v.onpause = function () {
      alert("已经暂停")
    }
    //开始播放时触发
    v.onplay = function(){
      console.log("play");
    }
    // 已经开始播放时触发   (开始时，暂停恢复后，结束后重新开始)   都会触发。
    v.onplaying = function(){
      console.log("正在播放，不要眨眼");
    }
    //时间轴时间改变
    v.ontimeupdate = function(){
      console.log("时间改变了");
    }
复制代码

音乐盒子案例

样式效果图

html部分

 <div class="content">
        <div class="singerContent clearfix">
            <div class="album fl">
                <div class="albumImg">
                    <a href="javascript:;" class="fl">
                        <img src="歌曲专辑封面" 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="歌曲名字">歌曲名字</span>
                    <span class="icon btnMv"></span>
                </div>
                <div class="songDetail clearfix">
                    <p class="albumName fl">
                        <span class="fontColor">专辑：</span>
                        <a href="javascript:;">歌曲名字</a>
                    </p>
                    <p class="singerName fl" title="SWIN-S"><span class="fontColor">歌手：</span><a href="javascript:;">歌手名字</a></p>
                </div>

                <div class="songWordContent">
                    <!-- 歌词部分 -->
                    <div class="jspPane">
                    </div>
                </div>
            </div>
        </div>
        <div class="blurBgMask"></div>
        <div id="blurBg"></div>
    </div>
    <audio src="歌曲mp3格式文件路径" controls></audio>
    <script src="js/jquery.min.js"></script>
    <script src="data/data.js"></script>
    <script src="js/coolyou.js"></script>

复制代码

css部分

/*清除默认的样式*/
* {
    margin: 0;
    padding: 0;
}
/*容器面板*/
.content{
    width: 100%;
    height: 650px;
    position: relative;
    background: #000;
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}
/*清除浮动*/
.clearfix::after{
    display: block;
    content: "";
    clear: both;
}
/*主面板样式*/
.content .singerContent {
    margin-top: 100px;
    z-index: 100;
    position: absolute;
    left: 50%;
    width: 840px;
    margin: 100px 0 0 -390px;
}
#blurBg{
    background-image: url("歌曲专辑封面图路径"); 
    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.3s 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;
}
复制代码

Js部分

/* 将歌词拆分：一个数组放时间，一个数组放歌词，这里的歌词需要是lrc文件，一条时间对应相应歌词*/
let timeArr = [];  //时间数组
let lrcArr = []; //歌词数组
//方法一，正则+while循环
let reg = /\[(\d{2}:\d{2})\.\d{2}\](.+)/g;
let res = reg.exec(lrcStr);//得到一条数据（多次调用可以得到多条数据而且按顺序不重复）
//当res没有数据就不再执行，所以可以得到所有数据
while(res){
  timeArr.push(res[1]);
  lrcArr.push(res[2]);
  res = reg.exec(lrcStr)
}
//方法二，正则+for循环分支
// let res = lrcStr.split(/\n\[|\]/);
// res.shift();
// console.log(res);
// for (var i = 0; i < res.length; i++) {
//    if(i%2){
//      //奇数
//      lrcArr.push(res[i])
//    }else{
//      //偶数
//      timeArr.push(res[i]);
//    }
// }

//将所有的歌词显示到页面中
for (let i = 0; i < lrcArr.length; i++) {
  $(".jspPane").append(`<p>${lrcArr[i]}</p>`);
}

//时间轴发生变化时触发（只要播放就会触发）
$("audio").on("timeupdate",function(){
  //获取当前时间轴事件 this.currentTime
  // 本来的格式为 01:05:44 需要转换为 01:05 ，需要注意时间是60进制的  65s = 01:05
  let m = parseInt(this.currentTime/60);//分
  let s = parseInt(this.currentTime % 60);//秒
  //补零操作  
  let str = `${m.toString().padStart(2,"0")}:${s.toString().padStart(2,"0")}`;
  //寻找当前时间对应的数组下标
  for (let i = 0; i < timeArr.length; i++) {
     if (str == timeArr[i]) {
     //给当前时间轴轴节点添加类，其他时间节点删除类
       $(".jspPane p").eq(i).addClass("playOver").siblings().removeClass("playOver")
      //  让jspPane向上移动
      if (i>=4) {
        $(".jspPane").css("top",(i-4)*-34);
      }else{
        $(".jspPane").css("top",0);
      }
     }
  }
})
复制代码

总结 实现音乐盒子的原理是我们将歌曲的时间和歌词分别存放到两个数组内，存放完成后我们利用音频的currentTime属性得到时间轴上的时间，让其和我们的时间数组的时间匹配，如果匹配成功则当前时间数组对应的元素下标和歌词数组对应的元素下标一样，我们用jq的方法修改相应的样式就完成了一个简易的音乐盒子（上面的案例我们仅仅匹配到了秒为单位）