Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge about how WeChat Mini Programs audio components can not be played on iOS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Solution: bind the click event to the audio component and manually trigger the playback pause method.

Code snippet:

Wxml file

Call recording not found

Wxss file

.reference {margin-top: 20rpx; height: 100%; padding: 5rpx; box-sizing: border-box;}. Ref-btn {width: 80rpx; height: 80rpx; display: flex;}. Ref-btn button {width: 80rpx; height: 80rpx; border-radius: 50%;}

Js file

/ * initial data of the component * / data: {currentGettingReferenceId: null, / / Audio being played id audioResourceMaps: {}, / / clicked audio list isPause:false, / / whether to pause} / * component life cycle * / lifetimes: {attached: function () {/ / get the instance this.audioContext = wx.createInnerAudioContext () here because it is a child component }, detached: function () {/ / stop playing this.stopAudio () / / execute},} when the component instance is removed from the page node tree Methods: {/ / get the recording getReference (e) {let id = e.target.dataset.referenceId if (id! = this.data.currentGettingReferenceId) {this.stopAudio ()} this.setData ({currentGettingReferenceId:id}) / / Click the API to obtain the recording url. The API request writes WXAPI.getResourceUrl (`/ conversation/conversationsession/$ {id} /`, {data_type: "all",}). Then (({resource_url}) = > {console.log ("audio address =", resource_url,) let url = resource_url & & resource_url.indexOf ("https://") >-1?" EncodeURI (resource_url): null this.data.audioResourceMaps [id] = url If (resource_url) this.playAudio (id,url) this.setData ({audioResourceMaps: this.data.audioResourceMaps}) console.log ("played list =", this.data.audioResourceMaps)}) .catch (function (e) {console.log (e)})} / / pause pauseAudio () {this.setData ({isPause:! this.data.isPause}) let id = this.data.currentGettingReferenceId console.log (id) "playback paused id") const innerAudioContext = this.audioContext if (this.data.isPause) {innerAudioContext.pause () console.log ("pause playback")} else {innerAudioContext.play () console.log ("resume playback")} / / stop playing stopAudio () {const innerAudioContext = this.audioContext innerAudioContext.stop () let obj = this.data.audioResourceMaps for (let item in obj) {delete obj [item]} / / if you stop playing, clear the audio address corresponding to the playlist id this.setData ({audioResourceMaps: obj) CurrentGettingReferenceId:null}) console.log ("stop playback")}, / / play playAudio (id,url) {const innerAudioContext = this.audioContext console.log (url) "address of audio") if (url) {innerAudioContext.src = url innerAudioContext.play () innerAudioContext.onPlay (() = > {console.log ("start playback")}) innerAudioContext.onTimeUpdate (() = > {console.log (innerAudioContext.duration, "total duration") console.log (innerAudioContext.currentTime) "current playback progress") setTimeout (() = > {console.log (innerAudioContext.duration, "total duration") console.log (innerAudioContext.currentTime, "current playback progress")} InnerAudioContext.onEnded (() = > {let obj = this.data.audioResourceMaps for (let item in obj) {delete obj [item]} this.setData ({audioResourceMaps: obj) CurrentGettingReferenceId:null}) console.log ("playback finished")}) innerAudioContext.onError ((res) = > {console.log (res.errMsg) console.log (res.errCode)})}}

Effect picture

Vant is used in ⚠️ WeChat Mini Programs, which must be referenced in the .json file or the tag will not be displayed.

I made the global available in the app.json file

"usingComponents": {"van-button": "@ vant/weapp/button/index", "van-icon": "@ vant/weapp/icon/index",} these are all the contents of the article "how to solve the problem that WeChat Mini Programs audio components can't play on iOS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.