微信小程式把玩(三十四)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
沒啥可值得太注意的地方 重要屬性: 1. wx.getBackgroundAudioPlayerState(object) 獲取播放狀態 2.wx.playBackgroundAu
微信小程式把玩(三十七)location API
location API也就分這裡分兩種wx.getLocation(object)獲取當前位置和wx.openLocation(object)通過經緯度開啟內建地圖。其中定位獲取位置資訊返回引數是有問題的speed,accuracy這兩個是沒有的。還有
微信小程式把玩(三十六)Storage API
其實這個儲存在新建Demo的時候就已經用到了就是儲存就是那個logs日誌,資料儲存主要分為同步和非同步 非同步儲存方法: 存資料 wx.setStorage(object) 相同key會覆蓋,可寫回調方法 獲取方法: wx.getStora
微信小程式把玩(三十五)Video API
電腦端不能測試拍攝功能只能測試選擇視訊功能,好像只支援mp4格式,值得注意的是成功之後返回的臨時檔案路徑是個列表tempFilePaths而不是tempFilePath文件寫的有點問題。 主要屬性
微信小程式把玩(三十九)navigation API
演示效果也看到了小程式也就提供這幾個處理導航控制。值得注意的是只能同時導航五個頁面 主要屬性: 導航條一些方法 wx.setNavigationBarTitle(object) 設定導航條的Title 導航標題可以通過三種方式設定,第一種是通過全域性
微信小程式把玩(三十八)獲取裝置資訊 API
獲取裝置資訊這裡分為四種, 主要屬性: 網路資訊wx.getNetWorkType, 系統資訊wx.getSystemInfo, 重力感應資料wx.onAcceleromete
微信小程式把玩(二十七)audio元件
音訊播放已經封裝的很好!只需配合屬性設定即可! (method和data配合使用) 主要屬性: wxml <audio action="{{action}}"
微信小程式把玩(二十八)image元件
image元件也是一個程式不可缺少的,可以這樣說一個app中image元件隨處可以看到,一般 image有兩種載入方式第一種是網路圖片第二種是本地圖片資源,都用src屬性去指定。 重點屬性:
微信小程式把玩(二十五)loading元件
loading通常使用在請求網路資料時的一種方式,通過hidden屬性設定顯示與否 主要屬性: wxml <!----> <button type="primary"
微信小程式把玩(二十九)video元件
視訊播放元件與圖片載入元件也沒啥差別,使用起來也沒啥注意的 重要屬性: wxml <!--監聽button點選事件--> <button bindtap="liste
微信小程式把玩(十四)button元件
button按鈕用的算是最普遍的元件之一。 主要屬性: wxml <!--按鈕預設樣式,點選事件--> <button type="defaule" bindtap="c
微信小程式把玩(十五)checkbox元件
不得不吐糟下checkbox預設樣式真是有點略醜!!!checkbox元件為一個多選框被放到checkbox-group組中,並在checkbox-group(只能包含checkbox)中設定監聽事
微信小程式把玩(十二)text元件
通常文字設定要不在wxml中設定,再要不就是通過weml繫結在js中設定文字。 wxml <view > <text>我是文字元件</text>
微信小程式把玩(十九)radio元件
radio元件為單選元件與radio-group組合使用,使用方式和checkbox沒啥區別 主要屬性: wxml <!--設定監聽器,當點選radio時呼叫--> &
微信小程式把玩(四十)animation API
動畫水還是比較深的,這裡只是簡單介紹下小程式中動畫的一些屬性和注意事項,做動畫前一定要整理好思路將動畫一步步分解,再進行組合!這裡只做引入。 wx.createAnimation(object) 看官方介紹 1.建立一個動畫例項animation。呼叫例
微信小程式把玩(二十三)modal元件
modal彈出框常用在提示一些資訊比如:退出應用,清楚快取,修改資料提交時一些提示等等。 常用屬性: wxml <!--監聽button點選事件--> <button b
微信小程式把玩(九)scroll-view元件
scroll-view為滾動檢視,分為水平滾動和垂直滾動。注意滾動檢視垂直滾動時一定要設定高度否則的話scroll-view不會生效。滾動檢視常用的地方一般都是Item項比較多的介面,比如我的模組
微信小程式開發(三)- 顯示 loading 提示框
首先看一張圖片,就是要做成的效果。 當我們點選查詢時,就會有一個請選擇地點的彈出框。 這個狀態我們只能去看微信開發文件了。 這個在API-介面-互動反饋-wx.hideLoading() 這
微信小程式把玩(七)資料繫結
資料繫結有一部分前幾個看著還行,後面的幾個可能有幾個不理解,介面展示的資料有的也因為條件沒法顯示。看不懂的可以先記著,後面真正用到時就會明白,反正我是這樣想的。這裡先記錄下 data.wxml
微信小程式把玩(十三)progress元件
進度條描述的是一種載入的狀態,比如軟體升級下載進度, 視訊,圖片下載進度… 主要屬性: wxml <progress percent="80" show-inf