As we all know, audio cannot automatically play on ios is a common problem. When we want to implement automatic play, calling oncanPlay directly has no effect (PC and Android devices will play normally). Here are the solutions:

Manually triggered (not recommended)

When our play page comes in from other pages, we can manually trigger the play in the click event of the previous page, or give a pop-up box after entering the page, and trigger the play by manually clicking.

WeixinJSBridgeReady is used when the project is run on wechat (used on wechat)
  • First load wechat JS-SDK
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
Copy the code
  • Then inject configuration information through the SDK page, wechat JS-SDK portal.
Wx. config({debug: true, // Enable debug mode, the return value of all API calls will be alert in the client, if you want to view the passed parameters, you can open it in the PC, parameter information will be printed in the log, only on the PC. Timestamp:,// Required, generate signature's timestamp nonceStr: ",// Required, generate signature's random string signature: ",// Required, signature jsApiList:" [] // Required, list of JS interfaces to use});Copy the code
  • The paly() player method is finally called when WeixinJSBridgeReady is listened on
wx.ready(function() {
    let audio = this.$refs.audio;
    audio.play();
    document.addEventListener("WeixinJSBridgeReady".function() {
            audio.play();
        },
        false
    );
});
Copy the code
Listening via the OndurationChange event (recommended)

Ondurationchange: The event is triggered when the audio/video duration changes. After the event is triggered, paly() is called to play. View the portal for details and other event objects

watch: {
    // currentSong refers to the current playing song
    currentSong () {
      this.$refs.audio.ondurationchange = () = > {
        this.totalTime = this.$refs.audio.duration
        if (this.isPlaying) {
          this.$refs.audio.play()
        } else {
          this.$refs.audio.pause()
        }
      }
    },
}
Copy the code

If there is another way, welcome to talk