20230410----重返学习-网易云音乐首页案例-audio音频标签

方朝端
111 阅读3分钟

day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签

网易云音乐首页案例

单例设计模式

const theModule = (function(){
  let theReturn = null
  //中间代码，可以使用各种数据，也可以创建函数，这里是一个闭包。
  return theReturn
})()

ajax封装

const getDataPromise = (url, theData) => {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.onreadystatechange = function () {
      try {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let data = JSON.parse(xhr.response);
          resolve(data);
          xhr = null;
        }
      } catch (err) {
        reject(err);
        xhr = null;
      }
    };
    xhr.onerror = (err) => {
      reject(err);
      xhr = null;
    };
    xhr.send(theData);
  });
};

swiper使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>swiper</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
  </head>
  <body>
    <div
      class="box"
      style="
        position: relative;
        display: flex;
        justify-content: center;
        height: 200px;
        width: 400px;
      "
    >
      <div
        id="swiper1"
        class="swiper"
        style="
          position: absolute;
          top: 0%;
          left: 25%;
          width: 50%;
          height: 100%;
          z-index: 9;
          background: skyblue;
        "
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
      <div
        id="swiper2"
        class="swiper"
        style="
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 50%;
        "
      >
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="background-color: red">Slide 1</div>
          <div class="swiper-slide" style="background-color: blue">Slide 2</div>
          <div class="swiper-slide" style="background-color: pink">Slide 3</div>
        </div>
      </div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>
      var Swiper2 = new Swiper("#swiper2", {
        effect: "fade",
        loop: true, // 循环模式选项
      });
      var Swiper1 = new Swiper("#swiper1", {
        controller: {
          control: Swiper2,
        },

        effect: "fade", //淡入淡出切换效果
        autoplay: {
          disableOnInteraction: true,
        },
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //点击小圆点切换
          bulletClass: "my-bullet", //非激活状态的class
          bulletActiveClass: "my-bullet-active", //激活状态的class
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // 如果需要滚动条
        // scrollbar: {
        //   el: ".swiper-scrollbar",
        // },
      });
    </script>
  </body>
</html>

audio音频标签

音频文件路径写法

  • 因为各浏览器对不用音频格式的支持是不一样的，所以有些格式的音频文件就播放不了

    • 没有兼容-音频文件放在audio标签上

      <audio
  src="./music163/media/合拍.m4a"
  controls
  autoplay
  loop
  preload="metaload"
  id="audioBox"
></audio>

    • 有兼容-多个音频文件路径分别放在audio标签内部的source标签上

      <audio controls>
  <source src="images/myDream.mp3" type="audio/mpeg" />
  <source src="images/myDream.ogg" type="audio/ogg" />
  <source src="images/myDream.wav" type="audio/wav" />
  您的浏览器不支持Audio!
</audio>

audio标签上的属性

  • 直接在html标签上写

    • controls:显示浏览器自带的播放组件「表现形式不一样」

    • autoplay:自动播放「当代浏览器默认是禁用了自动播放的功能的」

    • loop:循环播放

    • muted:静音

    • preload:资源加载的方式

      • none:只有开始播放的时候，才会去加载音频资源（页面加载的时候不会去获取音频资源）
      • metadata:页面加载的时候，首先获取音频的一些基本信息
      • auto:页面加载的时候，同时加载音频资源

    • src:音频的地址

      • 各浏览器对不用音频格式的支持是不一样的
      <audio src="images/myDream.m4a" id="audioInp" controls autoplay loop preload="metadata" />

  • 不过各个浏览器的样式不一样，并且也不够美观，所以一般就只使用src初步设置个mp3格式的或都preload设置一下资源加载方式

audio元素对象上的属性

  • 通过js获取DOM元素对象后使用

    • currentTime:存储了当前播放的时间「单位秒」
    • duration:存储了总的时间
    • paused:true/false 当前是否为暂停的
    • volume:0~1 控制音量的 1最大音量 0静音
    • ended:true/false 是否播放完毕
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      audio {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 没有兼容 -->
    <audio
      src="./music163/media/合拍.m4a"
      controls
      autoplay
      loop
      preload="metaload"
      id="audioElement"
    ></audio>

    <button>播放</button>

    <script>
      let audioElement = document.querySelector("audio");
      let buttonElement = document.querySelector("button");
      console.dir(audioElement);
      buttonElement.onclick = function () {
        console.log(audioElement.currentTime); //播放的进度时间 秒
        console.log(audioElement.duration); //总的播放时间 秒
        console.log(audioElement.ended); //是否播放完毕
        console.log(audioElement.paused); //是否暂停
        
        audioElement.volume = 0.5;
        console.log(audioElement.volume); //当前音量

        if (audioElement.paused) {
          audioElement.play(); //播放
          buttonElement.innerHTML = "暂停";
        } else {
          audioElement.pause(); //暂停
          buttonElement.innerHTML = "播放";
        }
      };
    </script>
  </body>
</html>
audio元素对象上的事件类属性

  • 通过js获取DOM元素对象后使用，DOM0级时要加on前缀，后接一个函数方法

    • canplay事件：音频可以播放了（有可能卡顿）
    • canplaythrough事件：也是音频可以播放了（加载很多资源后，才会触发，保证音频播放中不卡顿）
    • pause事件：音频开始暂停时触发
    • play事件：音频开始播放时触发
    • playing事件 播放中
    • volumechange事件
    • loadedmetadata 事件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      audio {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 没有兼容 -->
    <audio
      src="./music163/media/合拍.m4a"
      controls
      autoplay
      loop
      preload="metaload"
      id="audioElement"
    ></audio>

    <button>播放</button>

    <script>
      let audioElement = document.querySelector("audio");
      let buttonElement = document.querySelector("button");
      console.dir(audioElement);
      buttonElement.onclick = function () {
        if (audioElement.paused) {
          audioElement.play(); //播放
          buttonElement.innerHTML = "暂停";
        } else {
          audioElement.pause(); //暂停
          buttonElement.innerHTML = "播放";
        }
      };

      audioElement.onpause = function () {
        console.log("开始暂停");
      };
      audioElement.onplay = function () {
        console.log("开始播放");
      };
      audioElement.onplaying = function () {
        console.log("播放中");
      };

      audioElement.oncanplay = function () {
        console.log("可以播放了，有可能卡顿");
      };
      audioElement.oncanplaythrough = function () {
        console.log("可以播放了，不卡顿");
      };
      audioElement.onloadedmetadata = function () {
        console.log("信息加载部分的时候");
      };
    </script>
  </body>
</html>

audio元素对象上的方法

  • 通过js获取DOM元素对象后使用，后接小括号直接调用

    • play方法：控制音频播放

      • 这个方法浏览器规定必须用户与页面有过交互之后才能进行，一般要点击到文档一次才能触发该事件。

    • pause方法：控制播放暂停

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      audio {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 没有兼容 -->
    <audio
      src="./music163/media/合拍.m4a"
      controls
      autoplay
      loop
      preload="metaload"
      id="audioElement"
    ></audio>

    <script>
      let audioElement = document.querySelector("audio");
      audioElement.play();//一打开页面，立即播放失效 play()
      document.onclick = function () {
        audioElement.play();//与页面有过交互之后才能正常使用play()
      };
    </script>
  </body>
</html>

进阶参考

  1. JSDoc 中文文档
  2. Swiper使用方法,用来使用html骨架及引入规则的 -swiper中文官网
  3. Swiper的api文档,用来定制化swiper轮播图样式查的 -swiper中文官网
avatar
文章
阅读
粉丝