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

最新推荐文章于 2024-02-24 15:34:39 发布

原创

最新推荐文章于 2024-02-24 15:34:39 发布 · 1.9k 阅读

标签

#vue.js #音视频 #前端 #javascript #css3

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

不说了，直接上代码

<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"
                  @mouseup.native="isChange = false"></el-slider>
              </div>
              <div class="multimedia_box">
                <div class="time">