Web App蓝牙连接故障排查及音频切换播放功能实现咨询

Hey there! Let's tackle your problem step by step—first fixing that stubborn Bluetooth connection issue, then building the button-controlled audio playback logic. I'll keep things clear since you're new to Web Bluetooth development.

一、蓝牙连接失败排查（iPhone测试场景） #

Web Bluetooth has some specific requirements, especially on iOS. Let's check each possible missing configuration:

1. 确认设备和浏览器兼容性 #

• iOS版本: Web Bluetooth only works on iOS 13.4 or later. Double-check your iPhone's system version in Settings > General > About.
• Browser: iOS restricts Web Bluetooth to Safari or WebKit-based browsers (like Chrome for iOS). Other browsers (e.g., Firefox) don't support it yet.

2. 蓝牙模块类型检查 #

A critical mistake many new developers make: Web Bluetooth only supports BLE (Bluetooth Low Energy) devices. If you're using a classic Bluetooth module like HC-05/HC-06, it won't work. Switch to a BLE module such as HM-10, nRF52832, or ESP32 with BLE support.

3. 开发板蓝牙配置 #

Your BLE module needs to be configured correctly to be discoverable and connectable:

• Enable discoverable mode: Most BLE modules don't broadcast by default. In your dev board code, make sure to start advertising with the service UUID included in the broadcast data.
• Expose a GATT service: Web Bluetooth requires connecting to a specific GATT service. When requesting a device in your Web App, you must specify the service UUID (replace with your module's actual UUID):

  navigator.bluetooth.requestDevice({
    filters: [{ services: ['your-service-uuid-here'] }]
  })
  

• Fix iOS connection quirks: For better iOS compatibility, set minimum preferred advertising intervals in your dev board code (like in the Arduino example later).

4. Web App环境要求 #

• HTTPS only: Web Bluetooth is restricted to secure contexts. For local testing, you can use localhost (e.g., run a local server with python -m http.server), but for phone testing over a network, use an HTTPS server or tools like ngrok to expose your local server securely.
• Permission prompts: When you first try to connect, iOS will ask for Bluetooth access—make sure you tap "Allow".

二、按压按钮切换音频的逻辑实现 #

The core idea is: your dev board sends a signal via BLE when the physical button is pressed, and the Web App listens for this signal to control audio playback.

1. 开发板端代码（以Arduino + nRF52832为例） #

This code sets up a BLE service, listens for button presses, and sends a "PRESS" notification to the Web App:

#include <BLEDevice.h>
#include <BLEServer.h>
#include <BLEUtils.h>
#include <BLE2902.h>

BLEServer* pServer = NULL;
BLECharacteristic* pCharacteristic = NULL;
bool deviceConnected = false;
const int buttonPin = 2;
int lastButtonState = HIGH;

// Custom UUIDs (generate your own if needed)
#define SERVICE_UUID        "4fafc201-1fb5-459e-8fcc-c5c9c331914b"
#define CHARACTERISTIC_UUID "beb5483e-36e1-4688-b7f5-ea07361b26a8"

class MyServerCallbacks: public BLEServerCallbacks {
  void onConnect(BLEServer* pServer) { deviceConnected = true; }
  void onDisconnect(BLEServer* pServer) { deviceConnected = false; }
};

void setup() {
  pinMode(buttonPin, INPUT_PULLUP); // Use pull-up resistor for button
  BLEDevice::init("AudioController"); // Device name shown in Bluetooth list

  // Create BLE server and service
  pServer = BLEDevice::createServer();
  pServer->setCallbacks(new MyServerCallbacks());
  BLEService *pService = pServer->createService(SERVICE_UUID);

  // Create characteristic with notify permission
  pCharacteristic = pService->createCharacteristic(
                      CHARACTERISTIC_UUID,
                      BLECharacteristic::PROPERTY_READ |
                      BLECharacteristic::PROPERTY_NOTIFY
                    );
  pCharacteristic->addDescriptor(new BLE2902()); // Required for notifications
  pService->start();

  // Start advertising (critical for iOS discovery)
  BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
  pAdvertising->addServiceUUID(SERVICE_UUID);
  pAdvertising->setScanResponse(true);
  pAdvertising->setMinPreferred(0x06); // Fixes iOS connection issues
  pAdvertising->setMinPreferred(0x12);
  BLEDevice::startAdvertising();
}

void loop() {
  int buttonState = digitalRead(buttonPin);
  // Detect button press (debounced)
  if (buttonState != lastButtonState && buttonState == LOW) {
    if (deviceConnected) {
      pCharacteristic->setValue((uint8_t*)"PRESS", 5);
      pCharacteristic->notify(); // Send signal to Web App
    }
  }
  lastButtonState = buttonState;
  delay(50); // Debounce delay to avoid false triggers
}

2. Web App端代码 #

This code handles Bluetooth connection, listens for button press notifications, and controls audio playback:

HTML:

<button id="connectBtn">连接蓝牙设备</button>
<audio id="audioPlayer" controls style="margin-top: 10px;"></audio>

JavaScript:

const connectBtn = document.getElementById('connectBtn');
const audioPlayer = document.getElementById('audioPlayer');
// Replace with your audio file URLs (same domain or CORS-enabled)
const audioList = [
  'audio1.mp3',
  'audio2.mp3',
  'audio3.mp3'
];
let currentAudioIndex = 0;
let isPlaying = false;
let bleCharacteristic;

// Connect to BLE device
connectBtn.addEventListener('click', async () => {
  try {
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['4fafc201-1fb5-459e-8fcc-c5c9c331914b'] }]
    });
    const server = await device.gatt.connect();
    const service = await server.getPrimaryService('4fafc201-1fb5-459e-8fcc-c5c9c331914b');
    bleCharacteristic = await service.getCharacteristic('beb5483e-36e1-4688-b7f5-ea07361b26a8');

    // Start listening for button press notifications
    await bleCharacteristic.startNotifications();
    bleCharacteristic.addEventListener('characteristicvaluechanged', handleButtonPress);

    // Preload audio permission (iOS requires user interaction to play audio)
    audioPlayer.src = audioList[currentAudioIndex];
    await audioPlayer.play();
    audioPlayer.pause();

    connectBtn.textContent = '已连接';
    connectBtn.disabled = true;
  } catch (error) {
    console.error('连接失败:', error);
    alert('蓝牙连接失败，请检查设备和配置');
  }
});

// Handle button press from dev board
function handleButtonPress(event) {
  const signal = new TextDecoder().decode(event.target.value);
  if (signal === 'PRESS') {
    if (!isPlaying) {
      // Start playing current audio
      audioPlayer.src = audioList[currentAudioIndex];
      audioPlayer.play();
      isPlaying = true;
    } else {
      // Switch to next audio and play
      currentAudioIndex = (currentAudioIndex + 1) % audioList.length;
      audioPlayer.src = audioList[currentAudioIndex];
      audioPlayer.play();
    }
  }
}

// Update play state when audio ends
audioPlayer.addEventListener('ended', () => {
  isPlaying = false;
});

Key Notes: #

• Audio CORS: Ensure your audio files are hosted on the same domain as the Web App, or the server sends proper CORS headers.
• iOS Audio Restriction: The preload step (play then pause) is necessary because iOS blocks auto-play unless triggered by user interaction.
• Debouncing: The delay(50) in the Arduino code prevents multiple triggers from a single button press.

内容的提问来源于stack exchange，提问作者Johnny88520