网页自定义Audio标签样式

audio 标签属性

• src：指定音频文件的URL。可以是本地文件路径或远程URL。
• autoplay：表示音频是否自动播放。如果设置这个属性，音频会在页面加载完成后立即开始播放。
• controls：显示浏览器内置的音频控件，如播放/暂停按钮、音量控制等。
  controlsList="nodownload noplaybackrate"
  nodownload 不显示下载按钮
  nofullscreen: 不要全屏按钮
  noplaybackrate 不要播放速度按钮
  noremoteplayback: 不要远程回放
  disablePictureInPicture 禁止画中画按钮
• loop：指定音频是否循环播放。
• preload：指定音频在页面加载时的预加载行为。可选值有：
• none：不进行预加载。
• metadata：仅加载音频的元数据（比如时长、编码等）。
• auto：自动选择最合适的预加载方式。
• muted：表示音频是否静音。如果设置为true，音频将被静音。
• volume：指定音频的音量大小。取值范围为0.0到1.0之间。

<div class="modal-audio">
  <div v-if="audioSource" class="aiAudio-box">
    <audio ref="audioPlayer" id="aiAudio" controls :muted="!isMuted" controlsList="nodownload noplaybackrate" @canplay="changeAudio($event,'allTime')" @timeupdate="changeAudio($event,'getCurrentTime')">
      <source :src="audioSource" type="audio/mpeg">
    </audio>
    <!-- 自定义 播放暂停 -->
    <span class="play-button" v-if="!isPlaying" @click="pauseAudio"></span>
    <span class="pause-button" v-else @click="playAudio"></span>
    <!-- 自定义 音量 静音 -->
    <span class="volume-button" v-if="isMuted" @click="toggleMute"></span>
    <span class="mute-button" v-else @click="toggleMute"></span>
    <!-- 自定义 时间 -->
    <span class="audio-time">
<!--       {{ currentTimeLabel + ' / ' +  allTimeLabel }} -->
    </span>
    <!--  自定义 进度条 -->
    <input type="range" class="audio-range" ref="audioPlayInput" step="0.01" :max="allTime" :value="currentTime" @change="changeAudio($event,'changeCurrentTime')" />
  </div>
</div>

.modal-audio {
  padding: 20px 20px 0;
  display: flex;
  justify-content: center;

  .aiAudio-box {
    position: relative;
    #aiAudio {
      height: 50px;
      border: 1px solid #b292f4;
      border-radius: 40px;
      object-fit: initial;
    }
    .play-button,
    .pause-button {
      position: absolute;
      left: 13px;
      top: 11px;
      display: inline-block;
      width: 28px;
      height: 28px;
      background-size: cover;
    }
    .play-button {
      background-image: url("https://shthah.cn/audio/play.webp");
    }
    .pause-button {
      background-image: url("https://shthah.cn/audio/pause.webp");
    }
    .volume-button,
    .mute-button {
      position: absolute;
      left: 255px;
      top: 11px;
      display: inline-block;
      width: 28px;
      height: 28px;
      background-size: cover;
    }
    .volume-button {
      background-image: url("https://shthah.cn/audio/volume.webp");
    }
    .mute-button {
      background-image: url("https://shthah.cn/audio/mute.webp");
    }
    .audio-time {
      position: absolute;
      top: 14px;
      left: 48px;
      color: #454545;
    }
    .audio-range {
      position: absolute;
      top: 22px;
      left: 133px;
      width: 110px;
    }
    input[type="range"].audio-range {
      outline: none;
      -webkit-appearance: none; /*清除系统默认样式*/
      background: -webkit-linear-gradient(#b292f4, #b292f4) no-repeat,
        rgba(0, 0, 0, 0.19);
      background-size: 0% 100%; /*设置左右宽度比例*/
      height: 5px;
      border-radius: 5px;
    }
    /*拖动块的样式*/
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; /*清除系统默认样式*/
      height: 13px;
      width: 13px;
      background: #b292f4;
      border-radius: 50%;
      border: solid 1.5px #fff;
    }
  }
  audio::-webkit-media-controls-timeline-container,
  audio::-webkit-media-controls-seek-back-button,
  audio::-webkit-media-controls-seek-forward-button {
    background-color: #555;
  }

  // 整个音频控制面板的容器
  audio::-webkit-media-controls-panel {
    background: #fcfbff;
  }
  // 静音按钮
  audio::-webkit-media-controls-mute-button {
    background-image: none;
  }
  // 播放按钮 暂停
  audio::-webkit-media-controls-play-button {
    background-image: none;
  }
  audio::-webkit-media-controls-pause-button {
    background-image: none;
  }

  // 包含时间轴的容器
  audio::-webkit-media-controls-timeline-container {
    background-color: #b292f4;
  }
  // 当前播放时间显示 剩余播放时间显示 时间轴
  audio::-webkit-media-controls-current-time-display,
  audio::-webkit-media-controls-time-remaining-display,
  audio::-webkit-media-controls-timeline {
    display: none;
  }
}