Search code examples
jqueryhtmlaudiometeor

ReferenceError: audio is not defined


I'm building an audio player in Meteor for a client.

I'm getting an error when I try to create an audio object. I'm using the following code. Any idea why this is happening? Any help would be greatly appreciated.

// Define Audio
song = new Audio('/audio/waitforme.mp3');

// Define Play
play = $('#playicon');

$(function() {
$('#playicon').on("click", function() {
e.preventDefault();
song.play();
})
});


ReferenceError: Audio is not defined
    at AlannaSite.js:2:14
    at AlannaSite.js:12:4
    at /Users/CorrinSite/.meteor/local/build/programs/server/boot.js:242:10
    at Array.forEach (native)
    at Function._.each._.forEach (/Users/AriKamin/.meteor/packages/meteor-        tool/.1.1.9.1sd3e7j++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
    at /Users/CorrinSite/.meteor/local/build/programs/server/boot.js:137:5

Solution

  • I think there's a misconception here. You have the right code, but it's running in a different context.

    In the case of Meteor, the NodeJS back-end is also running your 'client-side' code. NodeJS doesn't have support for the Audio API that you're using, sadly, but your browser does.

    This code serving and running in both the client-side and server-side can get a bit confusing to know the lines between client + server, especially when Meteor tries to blur those lines!

    I would look up Meteor's architecture so you can best structure your code to target the 'client-end' vs. 'back-end' environments. A great article is here: https://www.discovermeteor.com/blog/what-goes-where/

    Basically, Meteor provides two directories that you can use to specifically target the client or server. You can place files in /client or /server and it will be handled for you.

    For something quick or for a file that is used in both contexts, the Meteor docs explains a boolean flag called Meteor.isClient or Meteor.isServer that you can use to mark code to be ran only on the client-side / server-side: http://docs.meteor.com/#/basic/Meteor-isClient