Issue
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
Answered By - iColor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.