1. 程式人生 > >微信小程式把玩(三十四)Audio API

微信小程式把玩(三十四)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