播放音频,uniapp小程序
时间: 2025-04-24 10:14:44 浏览: 30
### 实现音频播放功能
在uniapp小程序中实现音频播放功能主要依赖于`createInnerAudioContext` API 创建音频上下文实例,通过设置该实例的相关属性来控制音频的播放行为[^2]。
#### 使用 `createInnerAudioContext`
此方法用于创建内部音频上下文对象。开发者可以通过这个对象管理音频资源,比如加载、播放、暂停以及监听各种事件等操作。
#### 设置音频源
要让音频能够正常工作,需要给音频上下文实例赋值有效的音频 URL 给其 `src` 属性。这可以是一个本地路径或者是网络地址。
#### 控制音频播放状态
调用 `play()` 方法即可开始或者恢复播放;而当想要停止当前正在播放的内容时,则应该调用 `pause()` 或者 `stop()` 方法。
下面是一段简单的示例代码展示了如何初始化并操控音频:
```javascript
// 初始化音频上下文
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.src = 'https://example.com/path/to/audio.mp3'; // 设定音频文件URL
innerAudioContext.play(); // 开始播放音频
// 添加一些常用的事件处理程序
innerAudioContext.onPlay(() => {
console.log('音频已开始播放');
});
innerAudioContext.onPause(() => {
console.log('音频已被暂停');
});
innerAudioContext.onError((res) => {
console.error(`发生错误 ${JSON.stringify(res.detail)}`);
});
// 用户交互逻辑 (例如按钮点击触发)
function togglePlayPause() {
if (!innerAudioContext.paused) {
innerAudioContext.pause();
} else {
innerAudioContext.play();
}
}
```
这段脚本首先定义了一个名为 `innerAudioContext` 的变量用来保存由 `uni.createInnerAudioContext()` 返回的对象。接着设置了音频来源,并提供了几个基本的方法来进行播放控制。最后还展示了一种简单的方式让用户可以在页面上通过点击某个元素来回切换播放与暂停的状态。
阅读全文
相关推荐


















