微信小程序开发—(十五)audio音频播放

向右看齐 2021-09-12 07:06 1668阅读 0赞

一.知识点

（1）.audio为音频组件，我们可以轻松的在小程序中播放音频。

![20170517102532617][]

[整理下就是：][Link 1]

![20170517103754479][]

（2）.API

[1.wx.createAudioContext(audioId)][1.wx.createAudioContext_audioId]:创建并返回 audio 上下文 `audioContext` 对象

audioContext:`audioContext` 通过 audioId 跟一个 `<audio/>` 组件绑定，通过它可以操作对应的 `<audio/>` 组件。

![20170517103340083][]

二.操作

1.wxml

<audio poster="{
       {poster}}" name="{
       {name}}" author="{
       {author}}"  action="{
       {action}}"src="{
       {src}}" id="myAudio" controls loop></audio>
    
    <button type="primary" bindtap="audioPlay">播放</button>
    <button type="primary" bindtap="audioPause">暂停</button>
    <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
    <button type="primary" bindtap="audioStart">回到开头</button>

2.js

//获取应用实例  
    var util = require('../../utils/util.js')
    Page({
    	onReady: function (e) {
    	// 使用 wx.createAudioContext 获取 audio 上下文 context
    		this.audioCtx = wx.createAudioContext('myAudio')
    	},
    	data: {
    		poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    		name: 'Sugar',
        	author: 'Maroon 5',
    		src: 'http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3',
    	},
    	audioPlay: function () {
    		this.audioCtx.play()
    	},
    	audioPause: function () {
    		this.audioCtx.pause()
    	},
    	audio14: function () {
    		this.audioCtx.seek(14)
    	},
    	audioStart: function () {
    		this.audioCtx.seek(0)
    	}
    })

![20170517104735187][]

[20170517102532617]: /images/20210813/684503a5cf604165ba816d971ed76ea8.png
[Link 1]: http://www.cnblogs.com/liululin/p/6016617.html
[20170517103754479]: /images/20210813/1f7abe47e0df4ba0b4a240037631ddef.png
[1.wx.createAudioContext_audioId]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-audio.html
[20170517103340083]: /images/20210813/ee88c3c91e3544e3b914748881e01e38.png
[20170517104735187]: /images/20210813/169a2cac34d94cecb1434c744663f3f3.png