1

I'm trying to learn the Web Audio API from the MDN tutorial but even the most basic example — no modular synthesis, just playing a simple mp3 file — doesn't seem to work on my end.

I can see the dataset value being switched in the console, the play/pause on the controls change state, and in Firefox and Safari (but not in Chrome) the track locator even advances and the "playing" icon displayed on the browser tab.

(I've added the controls attribute to the audio tag just to have a progress indicator visible).

I can also download the file from the DOM controls and play it using the OS, and I've tried it with three different MP3 files. The computer's speakers are obviously working.

BTW, creating audio with oscillators and the AudioContext object works fine.

I'm out of ideas.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio controls src="song.mp3"></audio>
    <button data-playing="false" role="switch" aria-checked="false">
        <span>Play/Pause</span>
    </button> 
    <script src="audio.js"></script>
</body>
</html>

JS

'use-strict'

const aCtx = new AudioContext();
const el = document.querySelector('audio');
const track = aCtx.createMediaElementSource(el);
const button = document.querySelector('button');

button.addEventListener('click', function() {
    console.log(this);
    
    if (aCtx.state === 'suspended') {
        aCtx.resume();
    }
    
    if (this.dataset.playing === 'false') {
        el.play();
        this.dataset.playing = 'true';
    } else {
        el.pause();
        this.dataset.playing = 'false';
    }
}, false);
Cirrocumulus
  • 520
  • 3
  • 15
  • have you looked at your browser console messages for possible errors ? – Scott Stensland Sep 15 '21 at 12:33
  • Sorry, I didn't see this before. Console says "MediaElementAudioSource outputs zeroes due to CORS access restrictions for file". I've searched for the solution which seems to be adding this to the audio element: `el.crossOrigin = "anonymous";`. However this hasn't had any impact. – Cirrocumulus Sep 15 '21 at 16:34
  • you need to spin up a http server from same dir as your code so when browser calls your html it can find the mp3 file ... easy enough to do just cd into same dir as your html and launch a canned http server details see https://stackoverflow.com/a/21608670/147175 then no CORS issues – Scott Stensland Sep 15 '21 at 20:58
  • that will help however its just a necessary setup step to avoid CORS block so you can continue to battle root cause of no audio – Scott Stensland Sep 15 '21 at 22:13
  • Thank you. Indeed I don't get the CORS error with a full local server running (I was using VSCode's Live Server). However this doesn't solve the issue I'm having. No more errors in the console, I'm having a blast with the Web Audio API oscillators which work fine, but the above code doesn't produce any sound at all, it's so strange. – Cirrocumulus Sep 16 '21 at 05:28

0 Answers0