Canvas Audio Visualizer not appearing in Safari

Question

I'm creating an Audio Visualizer for a website using Canvas, but it's not appearing in Safari. I'm thinking it could be an issue with loading the audio, as the visualizer won't display until the audio loads.

Here is what I'm using to load the audio:

var request = new XMLHttpRequest();

request.open('GET', 'http://content.jwplatform.com/videos/gNilRtS6-xLS6q3Uo.m4a', true);
request.responseType = 'blob';

request.onload = function() {
    audio.src = window.URL.createObjectURL(request.response);
    console.log(request.response);
}

request.send();

If I navigate to the audio URL, it loads fine (and fairly quickly).

I've created a codepen example that works fine in Chrome and Firefox, but won't work in Safari: http://codepen.io/ericjacksonwood/pen/bBGEbM

@dandavis per your link Safari as basic support since v6 (but prefixed) I doubt OP is using a stereoPanner or states API or a constant source. But anyway some [mcve] or at least an output of the console would help to help. — Kaiido, Jan 11 '17 at 22:29
@Kaiido I can't seem to see that portion of the article that talks about prefixing for Safari. Could you explain a little more what you mean, and where you found that? I would love to get this working on Safari 6+ if possible? My CodePen link is Minimal (I've removed everything that's unnecessary for this example), Complete (I've kept in all of the essentials, and they can all be seen in the CodePen editor) and Verifiable (currently not working on Safari 10) — Eric Wood, Jan 12 '17 at 19:57
dandavis linked to https://developer.mozilla.org/en-US/docs/Web/API/AudioContext#Browser_compatibility. In safari column there is a yellow box saying that it needs webkit prefix. Not even sure it is up to date though. And I won't have time today to help you more, sorry. — Kaiido, Jan 12 '17 at 23:08
@Kaiido Perfect. Thanks for this. I was able to get it working. Posted an Answer below. — Eric Wood, Jan 13 '17 at 20:45

score 1 · Answer 1 · answered Jan 13 '17 at 20:45

I was able to get this working by updating my AudioContext(); to include a webkit vendor prefix:

var audioContext = new (window.AudioContext || window.webkitAudioContext)();

I've updated the codepen to reflext this change, and it seems to be working fine now on Safari, Chrome and Firefox.

Canvas Audio Visualizer not appearing in Safari

1 Answers1