小程序背景音乐实现

微信小程序 专栏收录该内容
10 篇文章 0 订阅

好久没有做小程序,今天看到一个需求,要做一个页面,需要带背景音乐。我看了官方文档,觉得这方面写的很好,但是没有示例,所以就想写一篇相关文章记录一下,也可以帮到其他人。

需求分析

实现一个带有背景音乐的界面,进入页面音乐会自动播放,当然,以为可以控制音乐的开始,暂停。

用到的知识

  • 小程序背景音乐接口
  • css动画

效果图

效果图

实现

wxml

<view class='music {{on? "on": ""}}'>
    <image src='../../images/music.png' style='width: 60rpx;height: 60rpx;' bindtap='stop'></image>
</view>

js

Page({
  data: {
    imgUrls: [
      '../../images/20190121204431.png',
      '../../images/20190121204408.png',
      '../../images/20190121204435.png',
      '../../images/20190121204440.png'
    ],
    image: '../../images/ewm.png',
    on: true   // 控制音乐的状态,以及图标是否旋转
  },

	// 放在onReady函数中,使在进入页面后,音乐就自动开始
  onReady () {
  	// 获取BackgroundAudioManager 实例
    this.back = wx.getBackgroundAudioManager() 
   
	// 对实例进行设置
    this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
    this.back.title = 'Tassel'   // 标题为必选项
    this.back.play()               // 开始播放
  },
  

// 已经有好心人帮忙给出了修改,在下面给出
 stop() {           // 点击音乐图标后出发的操作
    this.setData({
      on: !this.data.on
    })
    if (this.data.on) { 
      // 这里有点不明白,如果不重新加链接,音乐不会播放;  希望知道的人能分享告诉我
      this.back.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
      this.back.title = 'Tassel'
      this.back.play()
    } else {
      this.back.stop()
    }
  }
})

// 修改后代, 感谢hope xu
	stop() { this.back.pause(); // 点击音乐图标后出发的操作
		this.setData({ on: !this.data.on })
		 if (this.data.on) { 
			this.back.play() 
		}else{
	 	this.back.pause()
	    }
	}


css的主要代码

.music{
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  position: fixed;
  top: 40rpx;
  right: 40rpx;
  z-index: 9999;
}

.on{
  animation:rotating 2.5s linear infinite;
}   // css动画,控制图标一直旋转

@keyframes rotating{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}

到这里,小程序背景音乐的功能就实现了,希望能对大家产生一定帮助。

  • 8
    点赞
  • 9
    评论
  • 22
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值