Play local audio files with Web Audio API and File System Access API

play-local-audio.js

// Create audio context.
const ctx = new window.AudioContext();

// Autoplay policy: start context after user gesture.
window.addEventListener('click', () => {
  ctx.resume().then(() => {
    console.log('AudioContext started');
  });
}, {
  once: true,
  capture: true,
  passive: true,
});

// Play local audio file.
async function playAudio (fileHandle) {
  const file = await fileHandle.getFile();
  const arrayBuffer = await file.arrayBuffer();
  const decodedBuffer = await ctx.decodeAudioData(arrayBuffer);

  // Create source node
  const source = ctx.createBufferSource();
  source.buffer = decodedBuffer;
  source.connect(ctx.destination);
  source.start(); 
}

// Async IIFE
(async (event) => {
  // Show file picker for one audio file.
  const [fileHandle] = await window.showOpenFilePicker({
    multiple: false,
    types: [
      {
        description: 'Audio files',
        accept: {
          'audio/*': ['.wav', '.ogg', '.mp3', '.mp4', '.aac', '.flac', '.webm'],
        }
      },
    ],
    excludeAcceptAllOption: true,
  });

  // You may need try/catch around above, but for now: play the audio file.
  playAudio(fileHandle);
})();