使用input框实现音频文件的上传与播放

序言：最近的系统加的功能是越来越多了，前两天老板又让实现一个录音上传的功能，可以点击播放按钮打开音频播放器，点击暂停按钮暂定播放。想了想决定使用input框的file类型加上接收的参数为audio来实现此功能。

1.考虑到input的原生界面不好看，在按照设计稿搭建好页面后，在添加录音或者音频的同一层写入input框,使用定位和透明度opacity为0加上z-index使其浮在你的设计稿添加录音上方，如图一及下方代码：

解释：

• type="file"  带有 type="file" 的 <input> 元素允许用户可以从他们的设备中选择一个或多个文件。

• accept="audio/*" 定义了文件 input 应该接受的文件类型,字符串 audio/*，表示“任何音频文件”。

• @change="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"></audio>

流程：

1. 如果是vue框架进行的开发，这里使用vue3进行演示，首先定义audio内的一些内容：

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

2.  页面初始化时渲染dom：

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

3. 在图标上使用点击事件实现音频播放和暂停（这里使用nextTick的原因是nextTick所指定的回调会在浏览器更新DOM完毕之后再执行）：

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

结语：到这里就可以点击图标实现音频的播放和暂停。

优化：

既然公司要求上传录音或者音频，那肯定会给你上传音频的接口和音频列表的接口，所以这时候，页面上就不止一个录音文件。

并且我们的播放和暂停图标肯定是通过接口传来的列表数据渲染出来的，那么就出现一个问题，点击播放的时候所有列表的播放图标全部都会切换到暂停图标，如何做到点击第一个音频文件只让第一个的播放图标改变其他的图标不改变呢？

代码实现：

注意：最好不要把audio也放进列表的渲染中，这样页面会有多个audio的文件，最后你需要forEach你的audio存的文件，解决办法是放在需要循环列表的同一级上。

 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框实现音频文件的上传与播放实现的所有代码和逻辑。