WeChat mini-program audio component instance details, mini-program audio

Detailed description of the mini-program audio component instance, the mini-program audio

Audio Playback has been encapsulated well! You only need to set attributes! (Using method and data together)

Main attributes:

Wxml

<Audio action = "{action}" src = 'HTTP: // sc1.111ttt.com/2016/1/09/26/202261732256.mp3' poster = 'HTTP: // adjust controls = "true" name = "" author = "unknown"/> <button type = "primary" bindtap = "audioPlay"> play </button> <button type = "primary" bindtap = "audioPause"> suspend </button> <! -- Normal speed --> <button type = "primary" bindtap = "audioPlaybackRateNormal"> set to 1 speed </button> <! -- Slow release --> <button type = "primary" bindtap = "audioPlaybackRateSlowDown"> set to 0.5 times faster </button>

Js

Page ({data: {// text: "this is a Page" action: {method: ''}, audioPlay: function () {this. setData ({action: {method: 'play'})}, audioPause: function () {this. setData ({action: {method: 'pause'})}, audioPlaybackRateNormal: function () {this. setData ({action: {method: 'setplaybackrate', data: 1 }})}, audioPlaybackRateSlowDown: function () {this. setData ({action: {method: 'setplaybackrate', data: 0.5 }})}})

Related Articles:

Hello WeApp icon component
Window text Component switch component
Tabss component action-sheet
Application lifecycle button Component modal component
Page lifecycle checkbox component toast component
Modular Details form component details loading component
Data Binding input component navigator component
View component picker component audio component
Scroll-view component radio component video component
Swiper component slider component Image component