如何为Web Bluetooth API添加EventListener？蓝牙按钮控音频遇报错

Hey there! Let's work through your issues one by one to get your physical button triggering audio clips smoothly.

1. Getting the Full Custom Characteristic UUID #

First off, custom BLE characteristics require a full 128-bit UUID (not the shortened 16-bit ones for standard services). If you're building the physical device yourself (like with an Arduino + BLE module), you can define this UUID in your device code—for example, something like 0000ffb2-0000-1000-8000-00805f9b34fb.

When requesting the device via Web Bluetooth, you'll need to specify both the service UUID and the characteristic UUID in your requestDevice options, like this:

const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: ['your-service-uuid'] }],
  optionalServices: ['your-service-uuid'] // Required to access custom characteristics
});

Double-check that the UUID matches exactly what's programmed on your physical device—even a single typo will break the connection!

2. Fixing the "Cannot read property 'addEventListener'" Error #

That error almost always means you're trying to call addEventListener on an undefined or null object. Chances are, you're attaching the listener before you've successfully connected to the device and retrieved the target characteristic.

Here's the correct order of operations to avoid this:

1. Request and connect to the BLE device
2. Fetch the primary service associated with your button
3. Retrieve the specific custom characteristic
4. Then add the event listener (and enable notifications first!)

Check out this corrected snippet:

async function connectToDevice() {
  try {
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['your-service-uuid'] }],
      optionalServices: ['your-service-uuid']
    });

    const server = await device.gatt.connect();
    const service = await server.getPrimaryService('your-service-uuid');
    const characteristic = await service.getCharacteristic('your-characteristic-uuid');

    // Enable notifications to receive updates when the button is pressed
    await characteristic.startNotifications();

    // Now we can safely attach the listener
    characteristic.addEventListener('characteristicvaluechanged', handleButtonPress);

    console.log('Connected and listening for button presses!');
  } catch (error) {
    console.error('Connection error:', error);
  }
}

3. How to Add Event Listeners for Web Bluetooth #

The key event to listen for with button presses is characteristicvaluechanged—this fires whenever the characteristic's value updates (which your physical device should trigger when the button is pressed).

First, enable notifications for the characteristic (using startNotifications() as shown above). Then, write a handler function to process the value change and trigger audio playback:

// Preload your audio clips
const audioClips = [
  new Audio('clip1.mp3'),
  new Audio('clip2.mp3'),
  new Audio('clip3.mp3')
];

let pressCount = 0;

function handleButtonPress(event) {
  // Read the value sent from the device (adjust based on your device's data format)
  const buttonState = event.target.value.getUint8(0);
  
  // Increment press counter and loop through clips
  pressCount = (pressCount + 1) % 3;
  audioClips[pressCount].play().catch(error => {
    console.error('Audio playback error:', error);
  });
}

You can also add listeners for connection status events, like if the device disconnects unexpectedly:

device.addEventListener('gattserverdisconnected', () => {
  console.log('Device disconnected. Reconnecting...');
  // Optionally add reconnection logic here
});

Full Working Example Outline #

<button onclick="connectToDevice()">Connect Button Device</button>

<script>
const audioClips = [
  new Audio('clip1.mp3'),
  new Audio('clip2.mp3'),
  new Audio('clip3.mp3')
];
let pressCount = 0;

async function connectToDevice() {
  try {
    // Replace with your device's actual service/characteristic UUIDs
    const SERVICE_UUID = '0000ffb0-0000-1000-8000-00805f9b34fb';
    const CHAR_UUID = '0000ffb2-0000-1000-8000-00805f9b34fb';

    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: [SERVICE_UUID] }],
      optionalServices: [SERVICE_UUID]
    });

    const server = await device.gatt.connect();
    const service = await server.getPrimaryService(SERVICE_UUID);
    const characteristic = await service.getCharacteristic(CHAR_UUID);

    await characteristic.startNotifications();
    characteristic.addEventListener('characteristicvaluechanged', handleButtonPress);

    device.addEventListener('gattserverdisconnected', () => {
      console.log('Device disconnected');
    });

  } catch (err) {
    console.error('Error:', err);
  }
}

function handleButtonPress(e) {
  pressCount = (pressCount + 1) % 3;
  audioClips[pressCount].play().catch(err => console.error('Playback error:', err));
}
</script>

Don't forget to replace the placeholder UUIDs with your device's actual values, and ensure your audio files are in the correct file path. Also, note that Web Bluetooth only works over HTTPS (or localhost for local development).

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