vue audio音频手写实现进度条拖拽快进下一首切换音乐列表音量增减

最新推荐文章于 2024-06-11 16:25:22 发布

苦瓜式的幽默

最新推荐文章于 2024-06-11 16:25:22 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签： vue.js 音视频前端 javascript css3

本文链接：https://blog.csdn.net/are_gh/article/details/126182197

版权

本文介绍如何使用Vue.js构建一个功能齐全的音频播放器，包括音频进度条拖拽、快进、切换歌曲以及音量增减等功能。通过结合JavaScript、CSS3技术，实现了一个交互式的前端音频播放组件。

摘要由CSDN通过智能技术生成

不说了，直接上代码

<template>
  <div class="container">
    <div class="audio_head">
      <div class="head_item">名称</div>
      <div class="head_item">时长</div>
      <div class="head_item">分组</div>
      <div class="head_item">操作</div>
    </div>
    <div class="audio_content">
      <div class="audio_item" @click="playAudio(ele, index)" v-for="(ele, index) in audioList" :key="index">
        <span>{
  { ele.title }}</span>
        <span>{
  { }}</span>
        <span>{
  { ele.names }}</span>
        <span :class="ele.isTrue ? 'iconfont icon-zhengzaibofang' : 'iconfont icon-bofang'"></span>
      </div>
    </div>
    <div class="progress" v-if="audioList.length > 0">
      <!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
      <div class="box">
        <div class="header">
          <div class="h_right">
            <div class="content">
              <div class="left">
                <img style="width:100%" src="./image/audio.png" alt="">
              </div>
              <div class="right">
                <span>{
  { audioList[current].title }}</span>
                <span>{
  { transTime(currentTime) }} / {
  { transTime(duration) }}</span>
              </div>
            </div>
            <div class="wrip">
              <div class="progress_box">
                <el-slider v-model="currentTime" :max="duration" @change="sliderPlay" @input="sliderStop"
                  :format-tooltip="(val) => transTime(val)" @mousedown.native="isChange = true"
                  &#