文档章节

微信小程序把玩(三十四)Audio API

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 314
阅读 5
收藏 0
点赞 0
评论 0

这里写图片描述

没啥可值得太注意的地方

重要属性:

1. wx.getBackgroundAudioPlayerState(object) 获取播放状态

这里写图片描述

2.wx.playBackgroundAudio(object)播放音乐

这里写图片描述

3.wx.pauseBackgroundAudio()暂停音乐

4.wx.seekBackgroundAudio(object) 设置播放进度

这里写图片描述

5.wx.stopBackgroundAudio()停止播放音乐

三个监听器:

这里写图片描述

wxml

<button type="primary" bindtap="listenerButtonPlay">播放</button>
<button type="primary" bindtap="listenerButtonPause">暂停</button>
<button type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
<button type="primary" bindtap="listenerButtonStop">停止播放</button>
<button type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>

js

Page({
  data:{
    // text:"这是一个页面"
  },

  listenerButtonPlay: function() {
      wx.playBackgroundAudio({
          //播放地址
          dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
          //title 音乐名字
          title: '青云志',
          //图片地址
          coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

      })
  },

  /** * 播放状态 */
  listenerButtonGetPlayState: function() {
      wx.getBackgroundAudioPlayerState({
          success: function(res) {
              console.log(res)
              //duration 总时长
              //currentPosition 当前播放位置
              //status 播放状态
              //downloadPercent 下载状况 100 即为100%
              //dataUrl 当前播放音乐地址
          }
      })
  },
  /** * 监听button暂停按钮 */
  listenerButtonPause: function() {
      wx.pauseBackgroundAudio();
  },
  /** * 设置进度 */
  listenerButtonSeek: function() {
      wx.seekBackgroundAudio({
          position: 30
      })
  },
  /** *停止播放 */
  listenerButtonStop: function() {
      wx.stopBackgroundAudio()
  },

  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    /** * 监听音乐播放 */
    wx.onBackgroundAudioPlay(function() {
        console.log('onBackgroundAudioPlay')
    })

    /** * 监听音乐暂停 */
    wx.onBackgroundAudioPause(function() {
        console.log('onBackgroundAudioPause')
    })

    /** * 监听音乐停止 */
    wx.onBackgroundAudioStop(function() {
        console.log('onBackgroundAudioStop')
    })

  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52687330

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
"口令红包"-利用函数计算构建微信小程序的server端

前言 函数计算 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。函数计算会为您准备好计算资源,以弹性、可靠的方式运行您的...

rsong
02/06
0
0
如何在微信小程序中调用腾讯地图api

如果要搜索地图上的位置,比如附近的医院、学校等,就需要使用地图api,使用腾讯地图api的过程如下: 一、开发者申请腾讯地图 进入官网http://lbs.qq.com/key.html 申请密钥 验证完手机邮箱之...

临江仙卜算子
05/25
0
0
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
01/26
0
0
迅速上手:使用taro构建微信小程序基础教程

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用t...

mytac
昨天
0
0
WordPress 版微信小程序 - weimi-GZU

微觅贵大微信小程序 —— WordPress 版微信小程序 功能清单: 1.缩略图的方式显示文章列表(首页,分类文章),包括显示文章分类和发布时间,加载分页。 2.在首页用轮播方式显示置顶文章。 ...

似最初
05/24
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
04/18
0
0
微信小程序开发--『狗蛋TV』

狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。 线上开...

李帅醒
05/15
0
0
海报生成,但是微信小程序的绘图不能使用自定义弹窗,怎么实现功能

微信小程序,有一个需求 做海报生成,编写自己的文字内容保存海报生成图片,使用微信小程序的绘图api无法使用自定义弹窗实现文字内容修改,自定义弹窗层级在原生组件下层,有什么办法实现海报...

鱼被吃了
04/26
0
0
Taro实践 - 快速开发【知乎】多端应用

来自团队小伙伴 - 阿集,关于 Taro 上手实践的一篇文章,希望对大家的使用有所帮助。 1. Taro 简介 是由凹凸实验室打造的一套遵循 语法规范的多端统一开发框架。 使用 ,我们可以只书写一套代...

凹凸实验室
06/27
0
0
微信小程序 UI 组件库 - iView Weapp

iView Weapp —— 一套高质量的微信小程序 UI 组件库 iView Weapp 是什么? 微信小程序提供了自定义组件的功能,这使得 iView Weapp 成为了可能。小程序已经提供了很多组件和 API,但它们过于...

aresn
06/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

看看 LinkedList Java 9

终于迎来了 LinkedList 类,实现的接口就有点多了 Serializable, Cloneable, Iterable<E>, Collection<E>, Deque<E>, List<E>, Queue<E>。LinkedList是一个实现了List接口和Deque接口的双端链......

woshixin
9分钟前
0
0
算法 - 冒泡排序 C++

大家好,我是ChungZH。今天我给大家讲一下最基础的排序算法:冒泡排序(BubbleSort)。 冒泡排序算法的原理如下: 比较相邻的元素。如果第一个比第二个大(可以相反),就交换他们两个。 对每...

ChungZH
12分钟前
0
0
jquery ajax request payload和fromData请求方式

请求头的不同 fromData var data = { name : 'yiifaa'};// 提交数据$.ajax('app/', { method:'POST', // 将数据编码为表单模式 contentType:'application/x-ww...

lsy999
14分钟前
0
0
阿里P7架构师,带你点亮程序员蜕变之路

前言: Java是现阶段中国互联网公司中,覆盖度最广的研发语言。 掌握了Java技术体系,不管在成熟的大公司,快速发展的公司,还是创业阶段的公司,都能有立足之地。 有不少朋友问,成为Java架...

Java大蜗牛
15分钟前
0
0
Ecstore 在没有后台管理界面(维护)的情况如何更新表的字段

window 系统: 切换到:app\base 目录下: C:\Users\qimh>d: D:\>cd D:\WWW\huaqh\app\base 执行:D:\WWW\huaqh\app\base>cmd update linux 系统: 1># cd /alidata/www.novoeshop.com/app/......

qimh
20分钟前
0
0
设计模式-策略模式

策略模式 解释 对工厂模式的再次封装,使用参数控制上下文信息(将工厂返回的实例赋值给context field) 不会返回bean实例,只是设置对应的条件 调用context的方法(调用field的方法) 用户只...

郭里奥
23分钟前
0
0
python使用有序字典

python自带的collections包中有很多有用的数据结构可供使用,其中有个叫OrderedDict类,它可以在使用的时候记录元素插入顺序,在遍历使用的时候就可以按照原顺序遍历。 a = {"a":1,"b"...

芝麻糖人
52分钟前
0
0
RestTemplate HttpMessageConverter

RestTemplate 微信接口 text/plain HttpMessageConverter

微小宝
53分钟前
0
0
mysql视图/存储过程/函数/事件/触发器

--语法参考:https://dev.mysql.com/doc/ (当前用的是5.6) https://dev.mysql.com/doc/refman/5.6/en/sql-syntax-data-manipulation.html --视图 CREATE VIEW test.v AS SELECT * FROM t;......

坦途abc
54分钟前
0
0
MySQL参数优化案例

环境介绍 硬件配置 cpu核心数 内存大小 磁盘空间 16核 256G 3T 软件环境 操作系统版本 mysql版本 表数目 单表行数 centos-7.4 mysql-5.7.22 128张表 2kw行 优化层级与指导思想 优化层级 MySQ...

小致dad
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部