Solve the problem of ios audio not being able to play

Audio cannot be played directly through () in iOS, and the user needs to execute () in the click event or touch event to play.

The () music cannot be played normally in the ajax callback.

The user clicks the button and waits for the server to return data before playing the corresponding successful or failed music. The test cannot be played normally in iOS. Guess the audio in ios can no longer play() in ajax callback function

Below is a record of the problem solving process of playing music in ajax callback in ios

Solution 1 -- Reduce the volume

After the user clicks the time, set the audio volume to 0, and then set the audio volume to 1 after success; volume can control the audio volume, with a value range of 0~1

=number

I found that music can be muted in Chrome's mobile mode, but the volume cannot be controlled in iOS. Well, this is blocked by iOS. Give up

Solution 2 - Pause immediately after playback

The user will immediately play the music after clicking the button and wait until ajax returns data before continuing to play. The test can play normally. Some of the codes are as follows:

// User click eventif (()) {     // iOS is processed separately and does not need to this.$()
 this.$()
}

// Events after ajax success this.$()
 this.$ = 0
 this.$()

Since it is a vue project, don't mind if you have this.$refs in the code;

Summarize

In ios, if you need to play music or video, the user needs to manually trigger the event and call .play() to play (autoplay or directly.play() cannot be directly sent);

If you need to play music in the ajax callback function, you need to play music immediately after the user triggers the event before you can .play() in the callback function, otherwise the playback in ios will not be successful.