用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

13

帖子

218

积分

架构狮

Rank: 3Rank: 3

积分
218
2018-11-15 19:39:35 w王海洋29 架构狮 楼主 41092
本帖最后由 w王海洋29 于 2018-11-15 20:03 编辑

小程序背景音乐


给自己的小程序加上一个背景音乐是一个很有趣的事情呢,可以在使用小程序的时候点开歌曲,
专属的情歌更棒哦。所以今天介绍一个简单的方法给自己的小程序加上一首歌曲。不足之处多多指教。

小程序大学签到使用了背景音乐的功能,欢迎体验,同时欢迎公众号关联,本人微信:1771737622
524321854431292507.jpg

背景音乐的js文件

[JavaScript] 纯文本查看 复制代码
// 背景音乐
const innerAudioContext = wx.createInnerAudioContext()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    mp3: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46',
    // 背景音乐
    bgm: false,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
  },
  // 背景音乐
  BGM: function (e) {
    let that = this;
    if (that.data.bgm) {
      that.setData({
        bgm: false,
      })
      innerAudioContext.pause(); /**  暂停音乐 */
    } else {
      that.setData({
        bgm: true,
        bgmImgAni: "bgmImgAni"
      })
      // 播放音乐
      innerAudioContext.autoplay = true
      innerAudioContext.loop = true
      innerAudioContext.src = that.data.mp3;
      innerAudioContext.play()
    }
  },
})




背景音乐的wxml文件

[HTML] 纯文本查看 复制代码
<!--index.wxml-->
<!--   背景音乐  -->
<view class='bgmView' catchtap='BGM'>
  <image wx:if='{{bgm}}' class='bgmImg {{bgmImgAni}}' src='/images/kaishi.png'></image>
  <image wx:else class='bgmImg' src='/images/zanting.png'></image>
</view>



背景音乐的wxss文件

[CSS] 纯文本查看 复制代码
/**index.wxss**/
/* 背景音乐  */
.bgmView {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  z-index: 99;
}

.bgmImg {
  width: 70rpx;
  height: 70rpx;
}

.bgmImgAni {
  animation: jumpball 4s infinite linear;
}

@keyframes jumpball {
  100% {
    transform: rotate(360deg);
  }
}


这就是基本的代码结构了



欢迎体验背景音乐功能 685687247456825035.jpg






Bgmusic.zip

44.79 KB, 下载次数: 44

14

本帖最后由 jay5211314 于 2018-11-28 14:48 编辑

请问歌曲链接怎么生成的呢?--查到了。。
jay5211314 发表于 2018-11-28 14:14
请问歌曲链接怎么生成的呢?--查到了。。

你把歌曲存到自己的数据库,就生成歌曲链接了,或者引用其他的音乐链接就行了
文档里没看到loop啊,这是啥
w小千秋 发表于 2018-11-30 11:37
文档里没看到loop啊,这是啥

什么loop?可以直接加我wx:1771737622,直接问吧,我没有理解
发新帖
您需要登录后才可以回帖 登录 | 立即注册