H5高级音频应用

riverrun_z

已于 2022-06-13 16:08:38 修改

阅读量177

点赞数

分类专栏： html5 文章标签：音视频前端 html5 javascript

于 2022-06-13 16:06:07 首次发布

本文链接：https://blog.csdn.net/weixin_48047636/article/details/125261948

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      width: 400px;
      border: 1px solid #ddd;
      text-align: center;
      padding-bottom: 10px;
    }

    .container p {
      font-size: 1.3em;
      font-weight: bold;
      text-align: center;
    }

    .container img {
      width: 340px;
      height: 340px;
      border-radius: 50%;
    }

    .container input {
      width: 340px;
      display: block;
      margin: 10px auto;
    }

    .container .time {
      width: 340px;
      height: 30px;
      margin: 0px auto;
    }

    .container .time .left {
      float: left;
    }

    .container .time .right {
      float: right;
    }
  </style>
</head>

<body>
  <!-- poster视频海报帧 值是图片地址 -->
  <video id="video" style="background-color: #000;" width="640" height="360" src="./assets/let_it_go.mp4"
    controls></video>
  <div class="container">
    <input id="range" type="range" min="0" value="0" max="100">
    <div class="time">
      <span class="left" id="lspan">00:00</span>
      <span class="right" id="rspan">03:15</span>
    </div>

    <button id="btn_play">播放/暂停</button>
    <button id="btn_vp">音量+</button>
    <button id="btn_vm">音量-</button>
    <button id="btn_05">0.5倍速</button>
    <button id="btn_1">1倍速</button>
    <button id="btn_2">2倍速</button>
  </div>
  <script src="./assets/moment.js"></script>
  <script>
    let player = document.getElementById('video')
    player.addEventListener('loadedmetadata', function () {
      console.log(player.duration)
      rspan.innerHTML = moment.unix(player.duration).format('mm:ss');
    })
    // 更新播放进度信息
    //监听timeupdate这个事件,触发了就输出总时长和当前播放位置
    player.addEventListener('timeupdate', function () {
      let ct = player.currentTime
      let dr = player.duration
      console.log(`总时长:${dr},当前位置:${ct}`);
      // 更新range进度条
      range.max = dr
      range.value = ct
      // 更新时间文本
      let drstr = moment.unix(dr).format('mm:ss')
      let ctstr = moment.unix(ct).format('mm:ss')
      console.log(`总时长:${drstr},当前位置:${ctstr}`);
      lspan.innerHTML = ctstr
      rspan.innerHTML = drstr
    })
    // 拖拽进度条,修改播放位置
    range.addEventListener('change', function () {
      player.currentTime = range.value
    })
    // 修改播放速度
    btn_05.onclick = function () {
      player.playbackRate = 0.5
    }
    btn_1.onclick = function () {
      player.playbackRate = 1
    }
    btn_2.onclick = function () {
      player.playbackRate = 2
    }
    // 修改音量
    btn_vm.onclick = function () {
      //player.volume=player.volume-0.1
      player.volume = Math.max(0, player.volume - 0.1)
    }
    btn_vp.onclick = function () {
      //player.volume=player.volume+0.1
      // 第一个参数和第二个参数比 谁小听谁的
      // 1和0.1比，0.1小，就把0.1给volume
      //1和1.1比是1大，这时候就把1给volume
      player.volume = Math.min(1, player.volume + 0.1)
    }
    btn_play.onclick = function () {

      // 修改音频的路径
      //player.play()
      //player.pause
      if (player.paused) {
        player.play()
      } else {
        player.pause()
      }
    }
  </script>

</body>

</html>

效果截图

在这里插入图片描述

常用的音频事件/方法/属性

事件
abort 当音频/视频的加载已放弃时
loadedmetadata 当浏览器已加载音频/视频的元数据时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止
方法
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频
属性
autoplay 设置或返回是否在加载完成后随即播放音频/视频
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
preload 设置或返回音频/视频是否应该在页面加载后进行加载
volume 设置或返回音频/视频的音量