Browser APIs You Didn’t Know Existed: Using the Web Bluetooth, Web MIDI, and File System APIs in Your Apps

Modern web browsers offer a wealth of APIs that extend far beyond basic DOM manipulation and network requests. Among these, several lesser-known interfaces allow developers to bridge the gap between web apps and real-world hardware or local resources. This article dives into three such APIs: Web Bluetooth, Web MIDI, and the File System Access API. These tools enable web applications to connect with Bluetooth devices, interact with musical instruments, and manage local files directly from the browser. By incorporating them, developers can build more immersive and capable experiences without relying on native apps.

Unlocking Hardware Connectivity with the Web Bluetooth API

The Web Bluetooth API opens the door for web applications to discover, connect to, and communicate with nearby Bluetooth Low Energy (BLE) devices. This capability turns browsers into hubs for interacting with gadgets like fitness trackers, smart lights, or sensors, all while maintaining security through user permissions.

To get started, the API requires a secure context, meaning the page must be served over HTTPS. Browser support is solid in Chrome, Edge, and Opera, but developers should check compatibility for broader audiences. Security is a priority; users must explicitly grant permission for device access, and the API limits interactions to Generic Attribute Profile (GATT) services to prevent unauthorized data exposure.

Using the API involves requesting a device and establishing a connection. Here’s a basic example of scanning for a device and connecting:

async function connectToBluetoothDevice() {
  try {
    const device = await navigator.bluetooth.requestDevice({
      filters: [{ services: ['battery_service'] }]
    });
    const server = await device.gatt.connect();
    const service = await server.getPrimaryService('battery_service');
    const characteristic = await service.getCharacteristic('battery_level');
    const value = await characteristic.readValue();
    console.log('Battery level:', value.getUint8(0));
  } catch (error) {
    console.error('Bluetooth connection failed:', error);
  }
}

This code snippet requests a device with a specific service, connects to it, and reads a characteristic value. In practice, applications might use this to control LED lights or read sensor data.

Real-world implementations showcase the API’s potential. For instance, demos include controlling Bluetooth-enabled toys like BB-8 droids or racing cars, as seen in various Web Bluetooth samples. Another example involves printing receipts from a web app to a Bluetooth printer, demonstrating how progressive web apps (PWAs) can mimic native functionality.

Harnessing Musical Creativity via the Web MIDI API

The Web MIDI API provides a way for web applications to send and receive MIDI messages, facilitating connections with musical instruments, controllers, or even non-musical devices that use the protocol. This API transforms browsers into versatile tools for music production, live performances, or interactive installations.

Like other hardware APIs, it demands a secure HTTPS context and user approval for access. Browser compatibility includes Chrome, Edge, and Firefox with flags, so feature detection is essential. Security measures ensure that permissions are granular, often requiring a user gesture, and can be queried or revoked.

Access begins with requesting MIDI permissions. Once granted, applications can list inputs and outputs, then handle messages. Consider this example for accessing a MIDI input and logging messages:

navigator.requestMIDIAccess().then(function(midiAccess) {
  const input = midiAccess.inputs.values().next().value;
  if (input) {
    input.onmidimessage = function(event) {
      console.log('MIDI Message received:', event.data);
    };
  }
});

This setup captures incoming MIDI data, which could trigger sounds or visuals in an app.

Practical applications abound in creative projects. Libraries like WEBMIDI.js power tools for virtual synthesizers or controllers. One notable use is in browser-based music apps that connect to hardware keyboards, as explored in tutorials on building a monosynth with Web MIDI. Another involves variable fonts manipulated by MIDI inputs for dynamic typography experiences.

Managing Local Files with the File System Access API

The File System Access API empowers web apps to read from and write to local files and directories, much like desktop applications. This is particularly useful for text editors, photo processors, or data management tools running in the browser.

The API operates exclusively in secure contexts and relies on user-initiated actions, such as selecting files via pickers, to maintain privacy. Support is available in Chrome, Edge, and Safari, with ongoing expansions. Key security features include sandboxed access only to user-selected items, preventing arbitrary file system traversal.

Basic operations involve opening file handles and performing reads or writes. For reading a file:

async function readLocalFile() {
  const [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  console.log(contents);
}

Writing follows a similar pattern, using writable streams for efficient updates.

In action, this API shines in tools like online code editors or media apps. For example, vscode.dev uses it to edit local files directly in the browser, as detailed in explanations of how the File System Access API enables local file editing. Other uses include web-based photo editors that save changes back to original files without downloads.

Integrating These APIs into Modern Web Apps

Combining these APIs can lead to innovative applications, such as a music controller that syncs with Bluetooth lights or a file-based synth editor. When implementing, always prioritize user experience by handling permissions gracefully and providing fallbacks for unsupported browsers. Testing across devices ensures reliability.

For deeper dives, refer to official documentation on MDN Web Docs for browser APIs. These resources offer comprehensive guides and updates on evolving standards.

By exploring these hidden gems, developers can push the boundaries of what’s possible on the web, creating apps that feel native while remaining accessible across platforms.