vue.js中的audio.play()在Safari和iphone chrome上不起作用

<template>
  <button @click="playAudio">播放音频</button>
</template>

<script>
export default {
  methods: {
    playAudio() {
      const audio = new Audio('audio.mp3');
      audio.play();
    }
  }
}
</script>

<template>
  <audio ref="audio" muted>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
  <button @click="playAudio">播放音频</button>
</template>

<script>
export default {
  methods: {
    playAudio() {
      const audio = this.$refs.audio;
      audio.muted = false;
      audio.play();
    }
  }
}
</script>

<template>
  <audio ref="audio" @canplay="playAudio">
    <source src="audio.mp3" type="audio/mpeg">
  </audio>
  <button @click="loadAudio">加载音频</button>
</template>

<script>
export default {
  methods: {
    loadAudio() {
      const audio = this.$refs.audio;
      audio.load();
    },
    playAudio() {
      const audio = this.$refs.audio;
      audio.play();
    }
  }
}
</script>