Why does audio not start when 'play' button is first clicked?

Question

I'm having trouble with audio in Firefox. I have an .ogg audio clip in an <audio> tag, and Firefox does not start playing the file when the play button is fisrt pressed. However, if the play button is pressed and then a time is selected from the timeline, the audio will start playing from the time selected. The file will also start playing if the play button is pressed repeatedly (e.g. play/pause/play).

I'm also using the web audio API to run the audio through an AnalyserNode. The issue, however, does not seem to relate to the analyser specifically, as this can be removed without affecting this issue. It seems to have something to do with createMediaElementSource. If I remove the JavaScript code related to this, the issue disappears.

The audio file is being served from the same origin, so I'm fairly certain this is not a CORS issue (as described here). As I said, the audio will play, but only if a time is selected on the timeline.

I'm including the simplest example of the issue below. This would likely need to be run from an HTTP server (python -m http.server, python -m SimpleHTTPServer or whatever) in order to avoid any CORS issues. For this reason, I don't think I can include a JSFiddle demonstration of this issue here.

This issue appears to be Firefox only. It definitely does not affect Chrome, but I haven't actually tested any other browsers yet.

<audio id="audio" controls>
  <source src="piano-sonata-no13.ogg" type="audio/ogg" />
</audio>

<script>
    var audio_node = document.getElementById('audio');
    var audioctx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioctx.createAnalyser();

    window.addEventListener('load', function(e) {
        var source = audioctx.createMediaElementSource(audio_node);
        source.connect(analyser);
        source.connect(audioctx.destination);
    }, false);
</script>

Edit: An example of this issue can be found here: http://mdn.github.io/media-source-buffer/

@inorganik I'm not all that familiar with the audio API, but I assumed that the play button provided by the `audio` tag would play the file. As I said, it actually does play the file, but only after pressing play and then clicking on the timeline. I just played with it a little, and pressing play/pause/play will also play the file. Am I missing something? — ebenpack, Jul 30 '14 at 16:04
you could try setting the currentTime to 0 - `audio_node.currentTime = 0` But I think it's probably something to do with audioctx or AudioContext. Read up more on their documentation. — inorganik, Jul 31 '14 at 03:25

score 0 · Answer 1 · answered Jul 30 '14 at 19:07

0

Try replacing the window "load" event listener with this:

audio_node.addEventListener('canplay', function(e) {
    var source = audioctx.createMediaElementSource(audio_node);
    source.connect(analyser);
    source.connect(audioctx.destination);
}, false);

answered Jul 30 '14 at 19:07

idbehold

16,833
5
47
74

Thanks for your answer. I actually saw that you suggested this in another answer when I was doing my due diligence before I posted. I tried this, but it didn't have any effect. Unless I'm really missing something obvious here, I'm starting to think this might be a Firefox bug. – ebenpack Jul 30 '14 at 19:50

ebenpack · Accepted Answer · 2014-07-31T17:09:02.670

This issue appears to be related to a Firefox bug.

The gist of it is, it appears as if createMediaElementSource is currently somewhat broken in Firefox, and you can't use the audio API with createMediaStreamSource and have it work as expected.

I found a workaround here (WARNING: page autoplays audio), but as far as I can tell, it only works when autoplay is set to true. Quick testing suggests that setting audio.autoplay to true, and immediately calling audio.pause() may be an acceptable workaround to this issue. One downside to this method is that when the play button is pressed, the audio does not start at the very beginning of the file.

This solution would look something like this:

<audio id="audio" controls>
  <source src="piano-sonata-no13.ogg" type="audio/ogg" />
</audio>

<script>
    var audio_node = document.getElementById('audio');
    audio_node.autoplay = true;
    // Alternatively, the autoplay attribute can be set on the <audio> tag
    var audioctx = new (window.AudioContext || window.webkitAudioContext)();
    var analyser = audioctx.createAnalyser();

    window.addEventListener('load', function(e) {
        var source = audioctx.createMediaElementSource(audio_node);
        source.connect(analyser);
        source.connect(audioctx.destination);
        audio_node.pause();
    }, false);
</script>

Why does audio not start when 'play' button is first clicked?

2 Answers2