vue 音频组件

最新推荐文章于 2025-09-08 10:48:19 发布

原创

最新推荐文章于 2025-09-08 10:48:19 发布 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #语音识别 #react #js

一、概述

因项目要求，需要做一个音频播放器。

二、demo

test.vue

<template>
  <div>
    <img src="../assets/audio-bg.png" alt="">
    <br>
    <!-- 此处的ref属性，可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 -->
    <audio ref="audio"
           @pause="onPause"
           @play="onPlay"
           @timeupdate="onTimeupdate"
           @loadedmetadata="onLoadedmetadata"
           src="https://wdd.js.org/element-audio/static/falling-star.mp3"
           controls="controls">

    </audio>

    <!-- 音频播放控件 -->
<!--    <div>-->
<!--      <el-button type="text" @click="startPlayOrPause">{
     
     {audio.playing | transPlayPause}}</el-button>-->

<!--      <