当前位置:   article > 正文

uni-app小程序添加播放音乐功能_uni.playvoice

uni.playvoice
  1. <template>
  2.     <view class="warp">
  3.         <!-- 播放按钮 -->
  4.         <view class="music" :class="{ran:status}" @click="playVoice(lastRecord,isPlay)">
  5.             <image src="/static/images/music.png" style="width:70rpx;height:70rpx" mode="widthFix"></image>
  6.         </view>    
  7.         
  8.     </view>
  9. </template>
  10. <script>
  11. export default {
  12. data() {
  13. return {
  14. //播放器
  15. isPlay: false,
  16. status: true
  17. }
  18. },
  19. //开启音乐
  20. onShow(){
  21. this.open()
  22. },
  23. //非本页关闭音乐
  24. onHide(){
  25. this.innerAudioContext.pause(); // 停止
  26. },
  27. //非本页关闭音乐
  28. onUnload(){
  29. this.innerAudioContext.pause(); // 停止
  30. },
  31. methods: {
  32. //播放音乐
  33. open(){
  34. //播放音乐
  35. this.innerAudioContext = uni.createInnerAudioContext();
  36. this.playVoice('https://riswein-video.oss-cn-beijing.aliyuncs.com/music/music.mp3')
  37. uni.$on('changePlay', isPlay => {
  38. this.playVoice(this.lastRecord, this.isPlay)
  39. })
  40. },
  41. //播放音乐
  42. playVoice(url, isPlay) { // url即为音频路径
  43. if (url) {
  44. this.lastRecord = url; // 将路径赋值给定义的变量好做判断
  45. this.innerAudioContext.src = url; // 配置音频播放路径
  46. this.innerAudioContext.play(); // 播放
  47. this.innerAudioContext.loop = true; // 是否循环播放
  48. }
  49. this.isPlay = !this.isPlay;
  50. if (isPlay) {
  51. this.innerAudioContext.pause(); // 停止
  52. this.status = false
  53. }else{
  54. this.status= true
  55. }
  56. },
  57. }
  58. }
  59. </script>

 

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签