Javascript vue.js中的audio.play（）不适用于Safari和iphone chrome

我正在用vue.js制作一个音频播放器。但是当我点击play按钮时，我可以在桌面chrome上听到声音，但在iPhone chrome和safari浏览器中听不到

希望有人能尽快解决这个问题。 音频文件为.wav文件，audioUrl为编码文件

这是我的代码片段

<template> 
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">
        {{ name }}
      </p>
    </header>
    <section class="modal-card-body">
      <div class="audioplayer">
        <i :class="playButtonClass" @click="play" style="color:#FFF" aria-hidden="true"></i>
        <div class="progress" @click="progressClick">
          <div class="current" :style="{width: currentWidth}"></div>
        </div>
        <span class="time">{{ time }}</span>
        <i class="fa fa-volume-up volumeBtn" style="color:#FFF" aria-hidden="true"></i>
        <div class="volume" @click="volumneClick">
          <div class="currentVol" :style="{width: currentVolWidth}"></div>
        </div>
      </div>
    </section>
    <footer class="modal-card-foot">
      <button class="button" type="button" @click="$parent.close()">
        {{ lang('Close') }}
      </button>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'AudioPlayer',
  data() {
    return {
      audio: null,
      playButtonClass: 'fa fa-play playBtn',
      currentWidth: '0px',
      currentVolWidth: '0px',
      time: '00:00',
      progress: null,
      vProgress: null,
      modalLeft: null,
      loaded: true,
      duration: 0,
    }
  },
  props: ['audioUrl', 'name', 'size'],
  mounted() {    
    this.progress = document.querySelector(".progress")
    this.vProgress = document.querySelector('.volume')
    this.modalLeft = document.querySelector('.modal-card').offsetLeft
    this.currentVolWidth = this.vProgress.offsetWidth +'px'
    this.audio = new Audio(this.audioUrl)
    this.audio.play()
    this.duration = Math.floor(this.size / 1024 * 8 / 128)
  },
  beforeDestroy() {
    this.audio.pause()
  },
  methods: {
    play() {
      if (this.audio.paused) {
        this.audio.play()
        this.playButtonClass = "fa fa-pause playBtn"
      } else {
        this.audio.pause()
        this.playButtonClass = "fa fa-play playBtn"
      }      

      setInterval(() => {
        var seconds = Math.round(this.audio.currentTime)
        var secondsText = seconds % 60
        if (secondsText < 10) {
          secondsText = "0" + secondsText
        }
        var minutes = Math.floor(seconds / 60)
        var minutesText = minutes
        if (minutes < 10) {
          minutesText = "0" + minutes
        }

        this.currentWidth = Math.round(this.audio.currentTime) / this.duration * this.progress.offsetWidth + "px"
        this.time = minutesText + ":" + secondsText
      }, 1000)
    },
    progressClick(e) {
      var X = (e.clientX-document.querySelector('.modal-card').offsetLeft) - this.progress.offsetLeft
      this.currentWidth = X + "px"
      this.audio.currentTime = X * this.duration / this.progress.offsetWidth
    },
    volumneClick(e) {
      var X = e.clientX - document.querySelector('.modal-card').offsetLeft - this.vProgress.offsetLeft
      this.currentVolWidth = X + "px"
      this.audio.volume = X / this.vProgress.offsetWidth      
    }
  },
}

</script>

{{name}}

{{time}}
{{lang（'Close'）}
导出默认值{
名称：'AudioPlayer'，
数据（）{
返回{
音频：空，
PlayButton类：“fa fa play playBtn”，
currentWidth:'0px'，
currentVolWidth:'0px'，
时间：“00:00”，
进度：空，
vProgress:null，
modalLeft:null，
是的，
持续时间：0，
}
},
道具：['audioUrl'，'name'，'size']，
挂载（）{
this.progress=document.querySelector（“.progress”）
this.vProgress=document.querySelector（“.volume”）
this.modalLeft=document.querySelector（'.modal card'）.offsetLeft
this.currentVolWidth=this.vProgress.offsetWidth+'px'
this.audio=新音频（this.audioUrl）
this.audio.play（）
this.duration=Math.floor（this.size/1024*8/128）
},
在…之前{
this.audio.pause（）
},
方法：{
play（）{
如果（此.audio.paused）{
this.audio.play（）
this.playButtonClass=“fa fa pause playBtn”
}否则{
this.audio.pause（）
this.playButtonClass=“fa fa play playBtn”
}      
设置间隔（（）=>{
var seconds=Math.round（this.audio.currentTime）
var secondsText=秒%60
如果（秒文本<10）{
secondsText=“0”+secondsText
}
var分钟=数学地板（秒/60）
var minutesText=分钟
如果（分钟<10）{
minutesText=“0”+分钟
}
this.currentWidth=Math.round（this.audio.currentTime）/this.duration*this.progress.offsetWidth+“px”
this.time=minutext+“：”+secondsText
}, 1000)
},
（e）{
var X=（e.clientX-document.querySelector（'.modal card'）.offsetLeft）-this.progress.offsetLeft
this.currentWidth=X+“px”
this.audio.currentTime=X*this.duration/this.progress.offsetWidth
},
卷舔（e）{
var X=e.clientX-document.querySelector（'.modal card'）.offsetLeft-this.vProgress.offsetLeft
this.currentVolWidth=X+“px”
this.audio.volume=X/this.vProgress.offsetWidth
}
},
}

我也遇到了同样的问题，没有找到太多的例子，这是我经过测试的工作示例，希望能有所帮助。=）

点击
导出默认值{
数据（）{
返回{
soundEffect:新音频（'/mp3/initiate.mp3'），
声音：{
sound1:“/mp3/sound1.mp3”，
sound2:“/mp3/sound2.mp3”，
},
}
},
方法：{
userInitiateInteraction（）{
这个.soundEffect.play（）
此文件名为.getDataFromServer（）
},
播放声音（声音）{
如果（声音）{
this.soundEffect.src=声音
这个.soundEffect.play（）
}
},
getDataFromServer（）{
get（'/api/url'）。然后（res=>{
if（res.data.success）{
//测试没有用户交互播放声音
this.playSound（this.sound.sound1）//此播放声音1
}
})
},
任何其他事件播放声音（）{
get（'/api/url'）。然后（res=>{
if（res.data.success）{
//测试没有用户交互播放声音
this.playSound（this.sound.sound2）//此播放声音2
}
})
},
}
}

我也遇到了同样的问题，没有找到太多的例子，这是我经过测试的工作示例，希望能有所帮助。=）

点击
导出默认值{
数据（）{
返回{
soundEffect:新音频（'/mp3/initiate.mp3'），
声音：{
sound1:“/mp3/sound1.mp3”，
sound2:“/mp3/sound2.mp3”，
},
}
},
方法：{
userInitiateInteraction（）{
这个.soundEffect.play（）
此文件名为.getDataFromServer（）
},
播放声音（声音）{
如果（声音）{
this.soundEffect.src=声音
这个.soundEffect.play（）
}
},
getDataFromServer（）{
get（'/api/url'）。然后（res=>{
if（res.data.success）{
//测试没有用户交互播放声音
this.playSound（this.sound.sound1）//此播放声音1
}
})
},
任何其他事件播放声音（）{
get（'/api/url'）。然后（res=>{
if（res.data.success）{
//测试没有用户交互播放声音
this.playSound（this.sound.sound2）//此播放声音2
}
})
},
}
}

我知道在iOS（我想还有其他移动浏览器）上，您只能通过页面交互进行播放（甚至可能需要单击按钮-不确定）。我想知道在

mounted

中调用

audio.play（）

是否把事情搞砸了。如果你去掉那条线行吗？谢谢你的考虑。但是当我移除

挂载的
中的
audio.play（）
时，它仍然不起作用。您是否在控制台中看到任何错误？谢谢您的评论。控制台中没有错误。我知道在iOS（我想还有其他移动浏览器）上，您只能通过页面交互进行播放（甚至可能需要单击按钮-不确定）。我想知道在
mounted
中调用
audio.play（）
是否把事情搞砸了。是w吗
<template>
<button @click="userInitiateInteraction">Click</v-btn>
</template>
<script>
export default {
data() {
    return {
        soundEffect: new Audio('/mp3/initiate.mp3'),
        sound: {
                sound1: '/mp3/sound1.mp3',
                sound2: '/mp3/sound2.mp3',
        },
    }
},
 methods: {
        userInitiateInteraction() {
            this.soundEffect.play()
            this.getDataFromServer()
        },
         playSound(sound) {
            if (sound) {
                this.soundEffect.src = sound
                this.soundEffect.play()
            }
        },
        getDataFromServer() {
            axios.get('/api/url').then(res => {
                if (res.data.success) {
                    // Test without user interaction play sound
                    this.playSound(this.sound.sound1) // this play sound1
                }
            })
        },
        anyOtherEventToPlaySound(){
            axios.get('/api/url').then(res => {
                if (res.data.success) {
                    // Test without user interaction play sound
                    this.playSound(this.sound.sound2) // this play sound2
                }
            })
        },
 }
 }
 </script>