基于vue3和audio封装的简易音频播放器

最新推荐文章于 2024-08-29 13:46:47 发布

九号窗口

最新推荐文章于 2024-08-29 13:46:47 发布

阅读量928

点赞数 1

文章标签：音视频 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43734732/article/details/141459038

版权

样式如图所示
在这里插入图片描述

<template>
  <div class="audio-player">
    <div class="player_top" flex-ac  flex-justify-between >
      <div class="fileName  genericTitle" fs-28 l-height-32 height-64 pr-42 flex-ac>
        <span class="text-line-2">{
  { fileName }}</span>
      </div>
      <div class="play_btn">
        <div class="toPlay" width-60 height-60 v-if="!playStatus" @click="onPlay"></div>
        <div class="toStop" width-60 height-60 v-else @click="onPause"></div>
      </div>
    </div>
    <div class="player_time" fs-14 mt-13 mb-8 flex  flex-justify-between>
      <span class="play_audioCurrent" style="color:#1e62d9"> {
  { transTime(audioCurrent) }} </span>
      <span class="play_audioDuration" style="color:#A5A5A5"> {
  { transTime(audioDuration) }} </span>
    </div>
    <div class="play_progress" pl-13 pr-13>
       <el-slider v-model="playProgress" :show-tooltip="false" @input="onProgressChange" />
    </div>
  </div>
  <audio ref="audioRef" :src="url" @canplay="onCanplay" @timeupdate="updateProgress" @ended="playEnd" />
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onUnmounted, onMounted, watch, nextTick } from 'vue';

const props &