I have:
if ('webkitAudioContext' in window) {
ctx = new webkitAudioContext()
} else if ('AudioContext' in window) {
ctx = new AudioContext()
} else {
console.log('Web Audio API is not available.')
}
audioHuman = document.getElementById("human")
sourceHuman = ctx.createMediaElementSource(audioHuman)
sourceHuman.connect(ctx.destination)
But then I get an error here:
sourceHuman.noteOn(0)
Uncaught TypeError: sourceHuman.noteOn is not a function
Why is noteOn
method not defined?
UPDATE
I’m using my HTML audio tag to stream by hls.js:
<audio id="human" preload="metadata" playsinline>
<source src="media/human/playlist.m3u8">
<source src="media/human.m4a" type="audio/mpeg">
<source src="media/human.ogg" type="audio/ogg">
<source src="media/human.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
function setupHls(media, mediaSrc) {
if (Hls.isSupported()) { // Check if HLS.js is supported.
var hls = new Hls()
hls.loadSource(mediaSrc)
hls.attachMedia(media)
} else if (media.canPlayType('application/vnd.apple.mpegurl')) { // Check for native browser HLS support.
media.src = mediaSrc
} else {
console.log("Your browser doesn't support HTTP Live Streaming.")
}
}
setupHls(document.getElementById("human"), 'media/human/playlist.m3u8')
I would like to get the audio streamed by HLS and process it with Web Audio API.
According to this post, I guess I would have to use MediaElementAudioSourceNode. But I’m not quite sure how.
UPDATE
By logging the output to console, I understand that the MediaElementAudioSourceNode is actually the output type of the createMediaElementSource
method.
Advertisement
Answer
As pointed out by @DDomen , what I didn’t understand was the fact that HTML5 <audio>
element play/pause/stop
methods are still valid with AudioContext
:
Note: As a consequence of calling createMediaElementSource(), audio playback from the HTMLMediaElement will be re-routed into the processing graph of the AudioContext. So playing/pausing the media can still be done through the media element API and the player controls.