用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    无聊
    2017-8-15 16:38
  • 签到天数: 42 天

    [LV.5]常住居民I

    880

    主题

    2069

    帖子

    3万

    金钱

    管理员

    论坛管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    突出贡献优秀版主荣誉管理论坛元老

    QQ
    2018-1-18 14:25:38 zhichi_admin 管理员 楼主 11147
    如何设置小程序音乐后台播放?
    引言:
    audio微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作。

    附上微信小程序audio组件的相关属性说明:

    https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html

    本次将演示小程序audio poster、name、author、src、idcontrols 属性,以及 相关api:wx.createAudioContext 的使用,制作一个简单的音频播放控制页面
    2.png


    步骤一
    打开微信开发者工具,创建小程序项目,选择新建的空白文件夹即可,工具为自动为你生成小程序必要文件!(没有小程序appid不妨申请一个!去申请>>)接着在 pages 下创建一个文件夹命名 audio
    3.png

    步骤二
    接着打开 app.json如下图添加 "pages/audio/audio", 写入该页面路径,确保能够访问。写入之后,audio文件会生成js/json/wxml等空白配置文件
    4.png

    步骤三
    直接贴出代码了,audio.json 默认即可
    audio.js (audio脚本文件)
    [AppleScript] 纯文本查看 复制代码
    // audio.js
    Page({
      data: {
        poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
        name: '此时此刻',
        author: '许巍',
        src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
      },
      onReady: function (e) {
        // 使用 wx.createAudioContext 获取 audio 上下文 context
        this.audioCtx = wx.createAudioContext('myAudio')
      },
      audioPlay: function () {
        this.audioCtx.play()
      },
      audioPause: function () {
        this.audioCtx.pause()
      },
      audio14: function () {
        this.audioCtx.seek(14)
      },
      audioStart: function () {
        this.audioCtx.seek(0)
      }
    })

    audio.wxml(audio页面结构文件)

    [AppleScript] 纯文本查看 复制代码
    <!-- audio.wxml -->
    <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls></audio>
    
    <button class="button-style" bindtap="audioPlay">播放</button>
    <button class="button-style" bindtap="audioPause">暂停</button>
    <button class="button-style" bindtap="audio14">设置当前播放时间为14秒</button>
    <button class="button-style" bindtap="audioStart">回到开头</button>

    audio.wxss(audio页面样式文件)

    [AppleScript] 纯文本查看 复制代码
    /* pages/audio/aduio.wxss */
    .button-style{  
        background-color: #eee;  
        border-radius: 8rpx;  
        margin: 20rpx;  
    }  

    效果:
    5.png
    使用道具 举报 回复
    回的人少,我来小顶一下
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略