Recently, I am working on an English answer project. The project requirements are based on the results obtained by answering the questions. The question types are divided into: listen to the sound and choose pictures, look at the pictures and choose words, and fill in the blanks. The project is divided into three pages: the start page, the answer page and the end page. For each question type, I have made corresponding components on the answer page. When switching questions, the corresponding components will be displayed.
Traditionally, safari on ios and the wechat built-in browser don’t support audio autoplay, Usually solution is through the document. The addEventListener (‘ WeixinJSBridgeReady ‘, function () {audio. The play ()}, false) to realize the automatic playback, however
removeEventListener
1. There is a route switch from the home page to the answer page, but the WeixinJSBridgeReady event has been loaded at the beginning of the page, and the event cannot be monitored when the answer page is jumped;
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 it cannot play automatically when the question is switched again.
After continuous testing, we found that the reason why ios does not support automatic playback of dynamically created audio tag, including the first time the page is loaded, so we changed the idea and put the audio tag in the top-level App. Vue, instead of creating and destroying the audio tag with the switch of components. App.vue then writes a method in app.vue that takes SRC and callback arguments. When main.js is hung globally, call this method and pass in the corresponding SRC, as shown in app.vue
(about why use document. GetElementById, actually was prepared with $refs, but somehow in the app. Can’t get in the vue, the console print $ref can see have audio, but not read)
main.js
Kit:
The audio tag in app.vue must be set to Controls, then hide the audio through CSS, otherwise it will not play.
2. When the page is loaded by listening to the document. The addEventListener (‘ WeixinJSBridgeReady ‘, function () {audio. The load ()}, false) for audio. The load () to load at a time Otherwise, it will not be able to play automatically;
The above is a method of summarizing the recent project. All the tests are personal tests, which may not be universal, but only provide one way of thinking and solution. This is the first time to write an article, there may be a lot of unclear places, there are also some requirements of the project code in the screenshot, please ignore. If there are mistakes, I hope the leaders will correct them.