vue结合Audio进行语音播放（混ios的h5）

有一条语音信息需要用户点击就播放，是一个ios的内嵌h5页面

最终效果（如果需要样式，文末取）

audio标签的使用

<audio src="someaudio.wav" controls>
	您的浏览器不支持 audio 标签。
</audio>

只要路径正确，是可以播放的。样式非常丑。不过这不是我要说的重点。

我用的是AudioContext方式，关于new Audio()的一些属性方法

talk is cheap, show me code~~

父组件

<li class="voice">
  <span class="key">报修语音</span>
  <div class="more">
    <require-voice /> 
  </div>
</li>

语音组件

<div class="repaire-voice">
    <div @touchstart.prevent="togglePlay" class="v-box">
      <div class="img">
        <img v-show="!isplay" src="../assets/images/voice2x.jpg" alt="">
        <img v-show="isplay" src="../assets/images/voice_play.gif" alt="">
      </div>
      <div class="time">
        {{ voiceTime }}
      </div>
    </div>
  </div>
</template>

import { Vue, Component } from "vue-property-decorator";
@Component
export default class RepaireVoice extends Vue {
  private src = 'http://downsc.chinaz.net/Files/DownLoad/sound1/202007/13165.mp3';
  private isplay  = false;
  private audio: any;
  private time = 0;
  mounted(): void {
    this.initAudio();
  }
  get voiceTime(): string{
    const time = String(this.time);
    return `${Number.parseInt(time)}"`
  }
  private initAudio(){
    this.audio = new Audio(this.src);
    this.audio.load();
    this.audio.addEventListener("canplay", () => {
      /* 音频可以播放；如果权限允许则播放 */
        this.time = this.audio.duration;
    });
    this.audio.onplay = () => {
      this.isplay = true;
    }
    this.audio.onpause = () => {
      this.isplay = false;
    }
  }
  private togglePlay(): void {
    if(this.audio.paused){
      this.initAudio();//为了重新播放，如果去掉，再次点击播放就会接着播放
      this.audio.play();
    }else  this.audio.pause()
  }
  beforeDestroy(): void {
    this.audio.pause();
    this.audio = null;
  }

大家可能需要音频文件测试，推荐这个网站
站长素材[你可以f12拿它在线的链接，也可以下载到本地测试]

样式：

background:rgba(255,255,255,1);
box-shadow:1px 1px 4px 2px rgba(215,215,215,0.5);
border-radius:16px;

想了解更多关于box-shadow的知识