微信小程序|API音频与视频组件的插入使用

算法与编程之美

发布于 2020-04-15 07:37:58

1.9K00

代码可运行

文章被收录于专栏：算法与编程之美算法与编程之美

运行总次数：0

代码可运行

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1、音频组件控制 首先在微信小程序中插入音频组件需首先引入一个audioContext对象，之后再通过 audioId 跟一个audio组件绑定，通过它可以操作一个audio组件。audio组件引入代码示例如下：


 <!-- audio.wxml -->

audio src="{{src}}" id="myAudio" ></audio>

<button type=" primary" bindtap=" audioPlay" >播放</button>

<button type=" primary" bindtap= "audioPause">暂停</ button>

<button type=" primary" bindtap=" audio50">设置当前播放时间为50秒< / button>

<button type=" primary" bindtap=" audioStart">回到开头</ button>

其次在js文件中同样需要引入插件，保证音频组件的正常使用。

// audio.js

Page({

onReady: function (e) {

//使用WX. createAudioContext 获取audio 上下文context

this . audioCtx = wx . createAudioContext( ' myAudio' )

this . audioCtx . setSrc( 'http:/ /ws. stream . qqmusic . qq . com/M500001VfvsJ21xFqb . mp3?

guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E38

4E06DCBDC9AB7C49FD7

13D632D313AC4858BACB8DDD29067D3C601481D36E62053BF       8DF

 EAF74C0A5CCFADD6471160CAF 3E6A&fromta

g=46 ' )

this. audioCtx. play() 

},

data: 

{src:

},

audioPlay: function () {

this . audioCtx . play()

},

audioPause: function () {

this . audioCtx . pause( )

},

audio14: function () {

this . audioCtx . seek(14)

},

audioStart: function () {

this . audioCtx . seek(0)

})

2、视频组件控制 在小程序中创建一个videoContext对象，通过 videoId 跟一个 video 组件绑定，通过它可以操作一个 video 组件。

<view class="section tc">

<video id="myVideo" src="http: / /wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?

filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e0020401288254

0400&bizid=1023&hy=SH&fileparam= 

302c020101042530230204136ffd93020457e3c4ff02024ef202031e

8d7f02030f42400204045a320a0201000400"

enable-danmu danmu-btn controls></video>

<view class="btn-area">

<input bindblur="bindInputBlur" />

<button bindtap=" bindSendDanmu" >评论区< / button>

</view>

</view>

另外，组件的功能设置示例如下：

function getRandomColor () {

let rgb = []

for(leti=0;i<3;++i){

let color = Math. floor(Math. random() * 256) . toString(16)

color=color.length==1?'e

+ color : color

rgb . push(color)

return

+ rgb.join('')

Page({

onReady: function (res) {

this . videoContext = wX. createVideoContext( ' myVideo' )

},

inputValue:

bindInputBlur: function(e) {

this . inputValue = e.detail. value

},

bindSendDanmu: function ( ) {

this . videoContext . sendDanmu({

text: this. inputValue,

color: getRandomColor( )

})

})