vue播放mp3实现

1.在main.js中注册全局vue：mp3vue

2.在app.vue引入组件：<mp3vue/>

3.在需要调用的地方调用组件方法：this.mp3vue.mp3play(1)

4.组件代码:

<template>
 <div class="listen">
 <!-- 语音播放功能 -->
 <div >

 <!-- <input type="button" id="tts_btn" @click="myplay(0)" value="播放"> -->
 </div>
 <div id="bdtts_div_id">
 <audio id="successpay" autoplay="autoplay">
 <source id="tts_source_id" src="../image/SuccessPay.mp3" type="audio/mpeg">
 </audio>
 <audio id="failpay" autoplay="autoplay">
 <source id="tts_source_id" src="../image/FailPay.mp3" type="audio/mpeg">
 </audio>
 </div>
 </div>
</template>

<script>
export default {
 name: 'myplaymp3',
 data () {
 return {

 }
 },
 methods: {
 myplay(action){
  console.log("#mp3pay")

switch (action){
  case 1:
  var ttsAudio = document.getElementById('successpay');
  ttsAudio.play();
    break;
  case 0:
    var ttsAudio = document.getElementById('failpay');
    ttsAudio.play();
      break;
  default:
    break;
}

 }
 }
}
</script>

<style>
.listen
    {
    position:fixed;
     right:10px;
     bottom:10px;
     // top:20px;
     z-index:9999;
    }
</style>