Solve the problem of Vue project component switching and automatic audio playback under IOS wechat


Recently, I have been working on an English answer project. The project needs to get the score by answering the question. The question type of the project is divided into three pages: the beginning page, the answer page and the end page. For each question type, I have made the corresponding components. Each time I switch the questions, the corresponding components will be displayed, The audio will be played automatically when listening and selecting pictures

Traditionally, Safari and wechat built-in browser under IOS do not support the automatic play of audio. The common solution is to use thedocument.addEventListener('WeixinJSBridgeReady',function(){},false)However, the weixinjsbridgeready event will only be loaded once from the beginning to the end of the page loading, and cannot be passedremoveEventListenerSo there are two problems:

1. The route switches from the home page to the answer page. However, when the start page is in, the event weixinjsbridgeready has been loaded. When you jump to the answer page, the event can no longer be monitored;

2. When the home page is the answer page, when the question type component is switched, it will only play automatically when the listening question type is loaded for the first time, and cannot be automatically played again when switching to this kind of question again

After continuous testing, it is found that the reason why IOS does not support the automatic playing of audio tags created dynamically, including the first loading of the page, has changed the idea and put the audio tag on the top App.vue Inside, it will not be created and destroyed with the switch of components, and then in the App.vue Write a method in it and accept the parameters of SRC and callback main.js On the global level, Each time you switch, call this method and pass in the corresponding Src. The code is as follows: App.vue

(about why document.getElementById In fact, I was going to use $refs, but I don’t know why app.vue Can’t get it in. The $ref printed by the console can see the audio, but it can’t be read.)



In components:


Here we should pay attention to two points: 1 app.vue The audio tag in must have controls set, and then hide the audio through CSS, otherwise it cannot be played;

2. When the page is loaded, it needs to be monitoreddocument.addEventListener ('WeixinJSBridgeReady',function(){ audio.load ()}, false) audio.load ()Load once, otherwise it will not play automatically;


The above is a small editor to introduce to you to solve the IOS wechat Vue project component switching and automatic playing audio problems, I hope to help you, if you have any questions, please leave me a message, the editor will reply to you in time. Thank you very much for your support to the developeppaer website!

Recommended Today

What is “hybrid cloud”?

In this paper, we define the concept of “hybrid cloud”, explain four different cloud deployment models of hybrid cloud, and deeply analyze the industrial trend of hybrid cloud through a series of data and charts. 01 introduction Hybrid cloud is a computing environment that integrates multiple platforms and data centers. Generally speaking, hybrid cloud is […]