• 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 普法小课堂之“有效遗嘱” 2019-03-23
  • 回复@看着就想笑:同时,市场不具有配置全局性长期性战略性资源的功能。 2019-03-22
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-03-17
  • 北京市北京睿通伟业综合店【在线咨询】 2018-11-26
  • 10年后 逍客仍是15万级合资SUV的定义者 2018-11-26
  • 还有十八掌、自然想钱系列马甲…… 2018-11-26
  • 广东十一选五实时开奖: [demo] 小程序背景音乐

    河北体彩11选5今天开奖 www.7vek.com 2

    主题

    17

    帖子

    380

    积分

    诠释者

    Rank: 4

    积分
    380
    2018-11-15 19:39:35 w王海洋29 诠释者 楼主 82831
    本帖最后由 w王海洋29 于 2018-11-15 20:03 编辑

    河北体彩11选5今天开奖背景音乐


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

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


    背景音乐的js文件

    [JavaScript] 纯文本查看 复制代码
    // 背景音乐
    const innerAudioContext = wx.createInnerAudioContext()
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        mp3: '//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);
      }
    }
    


    这就是基本的代码结构了



    欢迎体验背景音乐功能






    Bgmusic.zip

    44.79 KB, 下载次数: 101

    14

    分享至 : QQ空间
    3 人收藏
    听不错的~不过有个问题,如何设置默认音乐自动开启?
    本帖最后由 jay5211314 于 2018-11-28 14:48 编辑

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

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

    什么loop?可以直接加我wx:1771737622,直接问吧,我没有理解
    2018-12-23 18:08:35 w王海洋29 诠释者
    7#
    fhs1986 发表于 2018-12-16 17:18
    听不错的~不过有个问题,如何设置默认音乐自动开启?

    直接在代码里面调一下状态就行了
    fhs1986 发表于 2018-12-16 17:18
    听不错的~不过有个问题,如何设置默认音乐自动开启?

    API 有提供啊 去看下API 就可以了
    不错哦
    天气查询小程序,欢迎大家使用,后续会有更多的功能融合进来
                                  我的小小网站
             

    也有问题咨询可加vx: jwq782108446
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产武汉 2019-03-23
  • 普法小课堂之“有效遗嘱” 2019-03-23
  • 回复@看着就想笑:同时,市场不具有配置全局性长期性战略性资源的功能。 2019-03-22
  • 楼市下半年或持续降温 房地产长效机制加速推进 2019-03-17
  • 北京市北京睿通伟业综合店【在线咨询】 2018-11-26
  • 10年后 逍客仍是15万级合资SUV的定义者 2018-11-26
  • 还有十八掌、自然想钱系列马甲…… 2018-11-26