微信小程序把玩(三十四)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 ...
随机推荐
- hdu3461Marriage Match IV 最短路+最大流
//给一个图.给定起点和终点,仅仅能走图上的最短路 //问最多有多少种走的方法.每条路仅仅能走一次 //仅仅要将在最短路上的全部边的权值改为1.求一个最大流即可 #include<cstdio& ...
- 【t008】钱币变换问题
Time Limit: 2 second Memory Limit: 32 MB [问题描述] 给定 2*n 个方格,将其排成一行.选择两个相邻的方格,设置为空方格,初始时不放钱币.而其余的方格共放入 ...
- 【u220】生日礼物
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一对双胞胎兄妹同一天过生日,这一天,他们的朋友给他俩送来了礼物,每个人送的礼物都是2本书,一本给哥哥, ...
- 使用Java Service Wrapper将java程序作为linux服务并且开机自动启动
以java应用程序为例,打包为tianlong.jar,程序入口为tianlong.QueueTest. 下面在linux的/opt下建立tianlong目录,复制tianlong.jar到/opt/ ...
- 生成式模型(generative) vs 判别式模型(discriminative)
Andrew Ng, On Discriminative vs. Generative classifiers: A comparison of logistic regression and nai ...
- 聊聊QPS/TPS/并发量/系统吞吐量的概念
原文:聊聊QPS/TPS/并发量/系统吞吐量的概念 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/cainiao_user/article/deta ...
- flex新的心得
主要是对于flex: 与width: 的心得,先看代码. <head> <meta charset="UTF-8"> <meta name=" ...
- Maven打包不打test,Maven中-DskipTests和-Dmaven.test.skip=true的区别
在使用mvn package进行编译.打包时,Maven会执行src/test/java中的JUnit测试用例, 有时为了跳过测试,会使用参数-DskipTests和-Dmaven.test.skip ...
- 打开一个很好的介绍Lucene4 FST文章
我没有看到源代码.看到这个博客了解一些基本的,像笔者下: http://download.csdn.net/download/guanxinquan/7380591 http://blog.sina. ...
- scipy 图像处理(scipy.misc、scipy.ndimage)、matplotlib 图像处理
from scipy.misc import imread / imsave / imshow imresize / imrotate / imfilter 1. scipy.misc 下的图像处理 ...