1

主题

9

帖子

151

积分

架构狮

Rank: 3Rank: 3

积分
151
本帖最后由 w王海洋29 于 2018-11-15 20:03 编辑

伟德国际电脑版充值背景音乐


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

伟德国际电脑版充值大学签到使用了背景音乐的功能,欢迎体验,同时欢迎公众号关联,本人微信:1771737622


背景音乐的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='http://www.wanmei138.com//images/kaishi.png'></image>
  <image wx:else class='bgmImg' src='http://www.wanmei138.com//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);
  }
}


这就是基本的代码结构了



欢迎体验背景音乐功能






Bgmusic.zip

44.79 KB, 下载次数: 1

14

分享至 : QQ空间
1 人收藏
发新帖
您需要登录后才可以回帖 登录 | 立即注册