微信小程序把玩(三十四)Audio API
没啥可值得太注意的地方
重要属性:
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(){
// 页面关闭
}
})
微信小程序把玩(三十四)Audio API的更多相关文章
- 微信小程序把玩(十四)button组件
原文:微信小程序把玩(十四)button组件 button按钮用的算是最普遍的组件之一. 主要属性: wxml <!--按钮默认样式,点击事件--> <button type=&qu ...
- 微信小程序把玩(十八)picker组件
原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...
- 微信小程序把玩(十九)radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别 主要属性: wxml <!--设置监听器,当点击radi ...
- 微信小程序把玩(十五)checkbox组件
原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...
- 微信小程序把玩(十六)form组件
原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...
- 微信小程序把玩(十二)text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...
- 微信小程序把玩(十)swiper组件
原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...
- 微信小程序把玩(三)tabBar底部导航
原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...
- 微信小程序把玩(三十九)navigation API
原文:微信小程序把玩(三十九)navigation API 演示效果也看到了小程序也就提供这几个处理导航控制.值得注意的是只能同时导航五个页面 主要属性: 导航条一些方法 wx.setNavigati ...
随机推荐
- 【u213&&t037】修剪花卉
Time Limit: 1 second Memory Limit: 128 MB [问题描述] ZZ对数学饱有兴趣,并且是个勤奋好学的学生,总是在课后留在教室向老师请教一些问题. 一天他早晨骑车去上 ...
- js进阶 9-7 自动计算商品价值
js进阶 9-7 自动计算商品价值 一.总结 一句话总结: 1.form表单控件value属性:属性可取值可赋值 2.文本onchange事件 3.form及form中控件通过name访问元素 二. ...
- spark 2.0.2 集群搭建
由于之前已经搭建过hadoop相关环境,现在搭建spark的预备工作只有scala环境了 一,配置scala环境 1.解压tar包后,编辑/etc/profile 2.source /etc/prof ...
- 【t087】公共汽车
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 路人丁成为了一名新公交车司机,每个司机都有一张牌子,牌子的正面写了拥有这个牌子的司机开的线路号,另外一 ...
- 符号函数(sign function)性质及应用
sgn(x):=⎧⎩⎨−101if x<0,if x=0,if x>0. 形式及描述较为简单的数学对象,更应当注意的便是其细节问题,对于 sign 函数(符号函数),便是自变量取值为 0 ...
- 记排查octopress生成时的编码错误
前些日子经若亮童鞋提醒,我在其他推荐的页面中增加了对 Dropbox 和 Linode 等工具的推荐,一来分享这些好用的产品,二来期望刚接触这些工具的好心的朋友可以不吝啬时间用我的推荐码注册,让我获得 ...
- ASP.Net请求小周期
另一篇另篇2 ASP.NET请求处理全过程 一个ASP.NET请求过程中,从浏览器中发出一个Web请求 到 这个请求被响应并显示在浏览器中的过程中究竟会发生哪些不同的事件,当我们进入这个事件之旅时,我 ...
- erlang工作前新手学习指引路线
Erlang学习总结,新手指引 要具体的写erlang入门技术网上有非常多,我写的肯定没有那些大牛写的好,自己也实习了快一个月,也做一个总结,给后erlang初学兴趣者提供些拙见吧 第一步搭建学习环境 ...
- svg查看预览 , 鼠标控制放大缩小 , 托拉拽等
自己写是不可能了 , 所以要借用插件 svg-panzoom.js 地址 : https://github.com/ariutta/svg-pan-zoom#demos 及常见问题https://ww ...
- node 调用Python exec child_process 模块
参考:http://javascript.ruanyifeng.com/nodejs/child-process.html https://nodejs.org/api/child_process.h ...