Vue3中利用input与audio标签实现音频上传及播放控制

Vue3音频上传与播放功能实现

前言：近期系统功能迭代频繁，业务方提出需要实现录音上传功能，要求用户点击播放按钮可打开音频播放器，点击暂停按钮可暂停播放。经过评估，决定采用input框的file类型，并配合接收audio参数的方案来完成该功能。

input文件上传组件布局

1. 由于input原生界面样式较为简陋，在依据设计稿搭建页面后，将input框置于添加录音或音频元素的同一层级。通过CSS定位、设置透明度opacity为0以及提升z-index层级，使其悬浮于设计稿的添加录音区域上方，如图一及下方代码所示：

解释：

• type="file" 带有 type="file" 属性的元素允许用户从设备中选择并上传一个或多个文件。
• accept="audio/" 定义了文件input应接受的文件类型，字符串 audio/ 表示接受任何音频格式的文件。
• @change="uploadAudio" 表示当用户点击上传文件并确认选择后，执行 uploadAudio 方法。

<div class="voice"  style:"position:relative">      
  <input type="file" accept="audio/*" id="audioUpload" class="audioUpload" @change="uploadAudio">
   <div class="add">
       <img src="png" alt="" >
       <span>添加音频</span>
   </div>
</div>
 
<style>
 
.audioUpload{
       position: absolute;
       right: ?px;
       top: ?px;
       height: 22px;
       z-index: 20;
       opacity: 0;
      }
 
</style>

音频播放控制逻辑

2. 此时input已具备点击弹出上传界面的功能，接下来实现录音播放功能。使用的核心元素是audio标签，同样将原生样式隐藏，转而使用设计稿中提供的播放和暂停图标按钮来控制录音的播放与暂停。

<audio ref="audioPlay" :src="audioSrc" style="opacity: 0;position: absolute;left: -999px;"@ended="onAudioEnded">

流程：

• 若项目基于vue框架开发，此处以vue3为例进行演示，首先定义audio相关的一些内容：

let audioSrc = ref('') //这里为你的音频文件路径
const audioPlay = ref(null)

• 页面初始化时渲染dom：

onMounted(() => {
  audioPlay.value = document.querySelector('audio');
});

• 在图标上绑定点击事件以实现音频播放和暂停（此处使用nextTick的原因是，nextTick指定的回调函数会在浏览器更新DOM完毕之后执行）：

//点击播放
function beginPlay(){
    nextTick(() => {
      audioPlay.value[0].play();
    })
}
//点击暂停
function stopPlay(){
  audioPlay.value[0].pause()
}

结语：至此，即可通过点击图标实现音频的播放与暂停操作。

多音频列表状态管理优化

优化：

既然公司要求上传录音或音频，必然提供了上传音频的接口以及获取音频列表的接口，因此页面上可能不止一个录音文件。

此外，我们的播放和暂停图标是通过接口传来的列表数据渲染生成的，这就带来一个问题：点击播放时，所有列表项的播放图标都会切换为暂停图标。如何做到点击第一个音频文件时，仅改变第一个音频的播放图标，而其他图标的状态保持不变？

代码实现：

注意：尽量避免将audio标签放入列表的循环渲染中，否则页面会产生多个audio元素，最后你需要遍历所有audio存储的文件。解决办法是将audio标签放在需要循环列表的同一级DOM结构中。

1. 在渲染好音频列表接口后，页面可能会显示这两个图标（播放图标和暂停图标。点击播放图标后音频开始播放，图标变为暂停）：

<img src="../assets/images/voiceBegin.png" alt="" v-if="!isPlaying || activeId !== item.id" @click="beginPlay(item.voice,item.id)">

<img src="../assets/images/voicePause.png" alt="" v-if="isPlaying && activeId === item.id" @click="stopPlay(item.id)">

这里使用 isPlaying 和 activeId 两个变量来控制图标的显示与隐藏。item.voice即为你的音频列表接口返回的音频路径，如下代码和图二所示：

const isPlaying = ref(false)
let activeId =  ref(null)
 
//开始播放
function beginPlay(url,id){
    isPlaying.value = true
    activeId.value = id
    audioSrc.value  = url
    nextTick(() => {
      audioPlay.value[0].play();
    })
}
 
//暂停播放
function stopPlay(id){
  audioPlay.value[0].pause()
  isPlaying.value = false
  activeId.value = null
}
 
//录音播放结束后图标自动跳转到播放图标
function onAudioEnded(){
  isPlaying.value = false
  activeId.value = null
}

总结：以上就是使用input框实现音频文件的上传与播放实现的所有代码和逻辑，实现了点击播放图标后音频开始播放，图标变为暂停等操作。

以上就是使用JS的input框实现音频文件的上传与播放功能的详细内容，更多关于JS input音频上传与传播的资料请关注本站其它相关文章！