有奖捉虫:云通信与企业服务文档专题,速来> HOT

功能描述

客户端支持在 Webview 上渲染原生音频播放器组件(v3.10.0 起支持同层渲染音频播放器组件)。
说明:
需要先完成接口鉴权才能调用,包括调用 binduser 或者创建自定义标签,否则会鉴权失败(鉴权请查看 JS-API 接口鉴权)。

属性说明

参数名称
参数类型
必填
参数描述
id
String
ID 定义了一个全文档唯一的标识符(ID)。其规定 HTML 元素的唯一的 ID。
src
String
音频链接。
说明:
src(音频链接)为非必填属性,初始化好后可以通过调用 audioContext.load({ src: 'xxxxx' }) 接口去加载。另外src(音频链接)必须是一个完整的 URL(统一资源定位符),包括协议部分、域名部分、文件名部分等(例如:https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/test.mp3)

相关JS-API

wemeet.createAudioContext

功能描述:创建 tm-audio 上下文 AudioContext 对象。
参数说明:
参数名称
参数类型
参数描述
id
String
tm-audio,组件的 ID。

AudioContext

接口描述:
AudioContext 实例,可通过 wemeet.createAudioContext 获取。
AudioContext 通过 ID 跟一个 tm-audio 组件绑定,操作对应的 tm-audio 组件。

AudioContext 方法

audioContext.load({ src: 'xxx' })

功能描述:加载需要播放的音频链接。
参数说明:
参数名称
参数类型
必填
参数描述
src
String
音频链接。
// 加载需要播放的音频链接。
audioContext.load({ src: "https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/test.mp3" });
audioContext.play() 播放音频
audioContext.pause() 暂停播放
audioContext.stop() 停止播放
audioContext.mute() 静音
audioContext.unmute() 解除静音

audioContext.seek({ time: xxx })

功能描述:跳转到指定的播放时间。
参数说明:
参数名称
参数类型
必填
参数描述
time
Number
需要跳转的指定播放时间。单位为 ms(毫秒)
audioContext.seek({ time: 10 * 1000 });
audioContext.getSrc() 获取当前音频链接
audioContext.getPlaytime() 获取当前音频的播放时间点,单位 ms(毫秒)
audioContext.getDuration() 获取当前播放段的时长,单位 ms(毫秒)
audioContext.getVolume() 获取当前音量,约定取值范围是[0,1],如果为0则是静音状态(muted)
audioContext.getMutedVolume() 获取静音前的音量

AudioContext 事件

通过 audioContext.on('event-name', callbackFunction) 方法去监听 AudioContext 的回调事件。例如:
audioContext.on('on-play', (res) => {
console.info(res);
});
audioContext.on('on-loaded-metadata', (res) => {
console.info(res);
});
audioContext.on('on-ended', (res) => {
console.info(res);
});

代码示例

<!-- react\\vue等框架中 -->
<tm-audio
id={"audio-ctrl"}
src={"https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/test.mp3"}
></tm-audio>

<!-- 或者 -->
<tm-audio
id="audio-ctrl"
src="https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/test.mp3"
></tm-audio>
注意:
需要在 js-api 接口鉴权成功之后,才能在页面中添加 tm-live-video、 tm-video 和 tm-audio 等自定义标签。否则自定义标签在调用 wemeet.createLiveVideoContext、wemeet.createVideoContext、wemeet.createAudioContext 初始化接口会报"Need to call JSAPI config first."的错误。
通过 js-api 去加载需要播放的音频链接:
import * as wemeet from '@tencent/wemeet-js-sdk';

// wemeet.createAudioContext(id) 接口需要传入 <tm-audio> 标签的 id。
const audioContext = await wemeet.createAudioContext('xxx');

// 加载需要播放的音频链接。
audioContext.load({ src: "https://website-1253513412.cos.ap-guangzhou.myqcloud.com/static/video/test.mp3" });

// 播放音频。
audioContext.play();
// 暂停播放。
audioContext.pause();
// 停止播放。
audioContext.stop();
// 静音。
audioContext.mute();
// 解除静音。
audioContext.unmute();
// 跳转到指定的播放时间。参数 time 的单位为 ms(毫秒)
audioContext.seek({ time: 10 * 1000 });

// 获取当前音频链接
audioContext.getSrc();
// 获取当前音频的播放时间点,单位 ms(毫秒)
audioContext.getPlaytime();
// 获取当前播放段的时长,单位 ms(毫秒)
audioContext.getDuration();
// 获取当前音量,约定取值范围是[0,1],如果为0则是静音状态(muted)
audioContext.getVolume();
// 获取静音前的音量
audioContext.getMutedVolume();
说明:
调用 wemeet.createAudioContext(id) 接口时会与 html 页面中 id 所对应的 tm-audio 标签进行绑定,然后返回对应的 audioContext 实例去调用 tm-audio 标签的 js-api。但是若 html 页面中的 tm-audio 标签发生过被 html 销毁(移除)再重新创建,这时就需要重新调 wemeet.createAudioContext(id) 接口获取新的 audioContext 实例。