网站导航
> 文章列表 > 20230410----重返学习-网易云音乐首页案例-audio音频标签

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

网友: 文章列表 2024-03-21 20:21:40

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

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><divclass="box"style="position: relative;display: flex;justify-content: center;height: 200px;width: 400px;"><divid="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><divid="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", //非激活状态的classbulletActiveClass: "my-bullet-active", //激活状态的class},// 如果需要前进后退按钮navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},// 如果需要滚动条// scrollbar: {//   el: ".swiper-scrollbar",// },});</script></body>
</html>

audio音频标签

音频文件路径写法

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

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

      <audiosrc="./music163/media/合拍.m4a"controlsautoplaylooppreload="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><!-- 没有兼容 --><audiosrc="./music163/media/合拍.m4a"controlsautoplaylooppreload="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><!-- 没有兼容 --><audiosrc="./music163/media/合拍.m4a"controlsautoplaylooppreload="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><!-- 没有兼容 --><audiosrc="./music163/media/合拍.m4a"controlsautoplaylooppreload="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中文官网
网络标签：

相关问题