当前位置：首页 > news >正文

微信小程序实现蓝牙开启自动播放BGM

news 2025/8/20 8:59:18

下面是一个完整的微信小程序实现方案，当蓝牙设备连接时自动播放背景音乐(BGM)。

实现思路

监听蓝牙设备连接状态
当检测到蓝牙设备连接时，自动播放音乐
当蓝牙断开时，停止音乐播放
处理相关权限和用户交互

完整代码实现

1. 项目结构

text

/pages/indexindex.jsindex.jsonindex.wxmlindex.wxss

2. index.wxml

xml

<view class="container"><view class="status">当前蓝牙状态: {{bluetoothStatus}}</view><button bindtap="initBluetooth">初始化蓝牙</button><button bindtap="startSearch">搜索设备</button><view class="devices"><block wx:for="{{devices}}" wx:key="deviceId"><view class="device" bindtap="connectDevice" data-device="{{item}}">{{item.name}} ({{item.deviceId}})</view></block></view><audio id="bgm" src="/assets/bgm.mp3" loop></audio>
</view>

3. index.wxss

css

.container {padding: 20px;
}.status {margin: 20px 0;font-size: 16px;color: #333;
}button {margin-bottom: 10px;
}.device {padding: 10px;border: 1px solid #eee;margin-bottom: 5px;
}

4. index.js

javascript

Page({data: {bluetoothStatus: '未初始化',devices: [],connectedDeviceId: null,audioCtx: null},onLoad() {// 创建音频上下文this.setData({audioCtx: wx.createInnerAudioContext()});this.data.audioCtx.src = '/assets/bgm.mp3';this.data.audioCtx.loop = true;// 监听蓝牙适配器状态this.onBluetoothAdapterStateChange();},// 初始化蓝牙initBluetooth() {wx.openBluetoothAdapter({success: (res) => {console.log('蓝牙初始化成功', res);this.setData({ bluetoothStatus: '已初始化，未连接' });this.startBluetoothDevicesDiscovery();},fail: (err) => {console.error('蓝牙初始化失败', err);wx.showToast({title: '请打开手机蓝牙',icon: 'none'});}});},// 开始搜索设备startSearch() {this.startBluetoothDevicesDiscovery();},// 开始发现设备startBluetoothDevicesDiscovery() {wx.startBluetoothDevicesDiscovery({success: (res) => {console.log('开始搜索设备', res);this.onBluetoothDeviceFound();},fail: (err) => {console.error('搜索设备失败', err);}});},// 监听发现新设备事件onBluetoothDeviceFound() {wx.onBluetoothDeviceFound((res) => {const devices = res.devices;console.log('发现新设备', devices);if (devices.length > 0) {this.setData({devices: this.data.devices.concat(devices)});}});},// 连接设备connectDevice(e) {const device = e.currentTarget.dataset.device;const deviceId = device.deviceId;wx.createBLEConnection({deviceId,success: (res) => {console.log('连接成功', res);this.setData({ bluetoothStatus: `已连接: ${device.name}`,connectedDeviceId: deviceId});// 连接成功后播放BGMthis.playBGM();},fail: (err) => {console.error('连接失败', err);}});},// 播放背景音乐playBGM() {this.data.audioCtx.play();wx.showToast({title: '蓝牙已连接，开始播放音乐',icon: 'none'});},// 停止背景音乐stopBGM() {this.data.audioCtx.stop();wx.showToast({title: '蓝牙已断开，停止播放音乐',icon: 'none'});},// 监听蓝牙适配器状态变化onBluetoothAdapterStateChange() {wx.onBluetoothAdapterStateChange((res) => {console.log('蓝牙适配器状态变化', res);if (!res.available) {this.setData({ bluetoothStatus: '蓝牙不可用' });this.stopBGM();} else if (res.discovering) {this.setData({ bluetoothStatus: '正在搜索设备...' });} else {this.setData({ bluetoothStatus: '蓝牙已开启' });}});},// 监听BLE连接状态变化onBLEConnectionStateChange() {wx.onBLEConnectionStateChange((res) => {console.log('BLE连接状态变化', res);if (res.connected) {this.setData({ bluetoothStatus: `已连接: ${res.deviceId}`,connectedDeviceId: res.deviceId});this.playBGM();} else {this.setData({ bluetoothStatus: '蓝牙已断开',connectedDeviceId: null});this.stopBGM();}});},onUnload() {// 页面卸载时停止搜索和断开连接wx.stopBluetoothDevicesDiscovery();if (this.data.connectedDeviceId) {wx.closeBLEConnection({ deviceId: this.data.connectedDeviceId });}wx.closeBluetoothAdapter();// 停止音乐this.data.audioCtx.stop();this.data.audioCtx.destroy();}
});

5. index.json

json

{"usingComponents": {},"requiredBackgroundModes": ["audio", "bluetooth"]
}

关键点说明

权限配置:
- 在app.json中配置requiredBackgroundModes以保证后台运行权限
- 需要用户授权蓝牙和音频权限
蓝牙流程:
- 初始化蓝牙适配器(openBluetoothAdapter)
- 开始搜索设备(startBluetoothDevicesDiscovery)
- 监听发现设备(onBluetoothDeviceFound)
- 连接设备(createBLEConnection)
- 监听连接状态(onBLEConnectionStateChange)
音频控制:
- 使用wx.createInnerAudioContext创建音频上下文
- 连接成功时调用play()方法
- 断开连接时调用stop()方法
用户体验:
- 显示蓝牙状态变化
- 连接/断开时有Toast提示
- 页面卸载时清理资源