Home > Article > Web Front-end > How does uniapp keep music playing during page switching?
How does uniapp keep music playing during page switching?
- PHPzOriginal
- 2023-04-18 15:20:051762browse
With the continuous development of mobile Internet technology, APP has become an indispensable part of people's lives, and its music playback function is even more loved by users. In today's APP design, many APPs have added special effects to play music when switching pages to enhance the user experience. This article will take uniapp as an example to discuss how to keep music playing during page switching, and give the code implementation.
1. Background introduction
Uniapp is a full-end development framework based on Vue.js. It can compile and generate multi-end applications such as small programs, H5, and APPs with a set of codes. In the development of Uniapp, page switching is a common operation and is also a good user experience design. In order to improve the user experience, we can create more beautiful music effects by controlling the play and pause of music when switching pages.
2. Solution implementation
In Uniapp development, we can use the life cycle function of Vue.js and the global events provided by uni-app to realize the non-stop playing of music when switching pages. The specific steps are as follows:
- Install the global music player plug-in
We can install the uni-audio-player plug-in through npm or yarn, which can be applied in uni-app A global music player is provided and supports continued playback when switching pages.
npm installation method:
npm install uni-audio-player
yarn installation method:
yarn add uni-audio-player
- The page component references the global music player
Reference the uni-audio-player plug-in in the page component, and link the music resources of the current page in the page mounted() life cycle function Pass in the global music player.
- Modify the music playback status when switching pages
Before switching pages, use the beforeEnter global event provided by uni-app to pause the playback of music on the current page; after switching pages Finally, play the music again through the afterEnter global event provided by uni-app.
The following is the specific code implementation:
- Install uni-audio-player plug-in
npm install uni-audio-player
- Page component references the global music player
<uni-audio-player ref="audio" :src="musicSrc" autoplay></uni-audio-player> <!--其他页面内容-->
<script><br> export default {</p>
<pre class="brush:php;toolbar:false">data() {
return {
musicSrc: '音乐链接'
}
},
mounted() {
this.$refs.audio.setSrc(this.musicSrc)
}</pre>
<p>}<br></script>
In the component, we obtain global music playback by introducing a plug-in player, and pass the music resource link into the plug-in, which is implemented through the setSrc method provided by uni-audio-player.
- Modify the music playback status when switching pages
<!--其他页面内容-->
<script><br> import UniAudioPlayer from '@/components/uni-audio-player/uni-audio-player.vue'<br> export default {<br></p> <pre class="brush:php;toolbar:false">mounted() { uni.$on('beforeEnter', this.beforeEnter) uni.$on('afterEnter', this.afterEnter) }, methods: { beforeEnter(to, from) { const audioComp = UniAudioPlayer.audioComp if (audioComp && !audioComp.paused && !audioComp.ended) { audioComp.pause() } }, afterEnter(to, from) { const audioComp = UniAudioPlayer.audioComp if (audioComp && audioComp.paused) { audioComp.play() } } }, destroyed() { uni.$off('beforeEnter', this.beforeEnter) uni.$off('afterEnter', this.afterEnter) }</pre>}<p></script>
In the page component, we control the playback and pause of music by listening to the global events beforeEnter and afterEnter provided by uni-app. Among them, the beforeEnter event will be triggered before the page is switched. We determine whether the music is playing and call the pause() method to pause the music. The afterEnter event will be triggered after the page is switched. We determine whether the music is paused and call the play() method to play the music. 3. SummaryThrough the introduction and code implementation of this article, we can find that in uniapp development, playing music when switching pages can not only improve the user experience, but also improve application functions. more perfect. Through the life cycle function of Vue.js and the global events provided by uni-app, we can quickly implement this function. In actual projects, applying this technology can also enable users to produce better visual and auditory effects.
The above is the detailed content of How does uniapp keep music playing during page switching?. For more information, please follow other related articles on the PHP Chinese website!