Javascript; Plays music

[NoFatAsiansPlz]

Can somebody help me on how I make a class when the user opens the application up it plays the music that's in the folder? Because I'm very new to javascript so if you don't mind telling me how to do this it would be great!

[Diki]

Just create an Audio object and call the play function:

var music = new Audio("foo.mp3");
music.play();

It requires HTML5 so it won't work in older browsers, but with the exception of Internet Explorer it would be a pretty damn old browser, so unless you want to support IE6-8 for some reason you'll be fine.

[Rawnern]

If you're going to play multiple sounds, use this code...

function playSound(name) {
    var sound = document.createElement("audio");
    sound.src = name;
    sound.autoplay = true;
}

...and just call it like this:

playSound('soundname.wav');

Also, have a look at the file support for the diffrent browsers!
http://www.w3schools.com/html/html5_audio.asp

[Diki]

At 5/21/13 02:24 AM, Rawnern wrote: If you're going to play multiple sounds, use this code...

function playSound(name) {
var sound = document.createElement("audio");
sound.src = name;
sound.autoplay = true;
}

Why would you want to create a new element every single time as well as have no control over the audio whatsoever (since the variable was created locally in a function and not stored anywhere)?

At 5/21/13 02:24 AM, Rawnern wrote: http://www.w3schools.com/html/html5_audio.asp

Also please don't link to W3Schools; that place is absolute garbage. It's unlikely that even they could fuck up something as simple as referencing support for HTML5 features but you still may as well use Can I Use because it's easier to read, more comprehensive, and isn't W3Schools.

[Rawnern]

At 5/21/13 06:33 AM, Diki wrote: Why would you want to create a new element every single time as well as have no control over the audio whatsoever (since the variable was created locally in a function and not stored anywhere)?

Because then he can play multiple sound effects without delay when a new one is played :)

Also please don't link to W3Schools; that place is absolute garbage. It's unlikely that even they could fuck up something as simple as referencing support for HTML5 features but you still may as well use Can I Use because it's easier to read, more comprehensive, and isn't W3Schools.

There is nothing wrong with W3Schools.

To OP: try asking questions on Stackoverflow.com - good quality answers!

[Diki]

At 5/21/13 02:41 PM, Rawnern wrote: Because then he can play multiple sound effects without delay when a new one is played :)

How is repeatedly loading a sound that may very well be used many, many times going to be faster?
What if he needs to stop the sound in the middle of playback? Or adjust the volume?

This is pretty irrelevant either way because the OP asked about playing music and not sound effects.

At 5/21/13 02:41 PM, Rawnern wrote: There is nothing wrong with W3Schools.

As a reference material (e.g. for things like compatibilities, like what you linked to) I sort of agree with you as it's pretty much impossible to get wrong, but everything they may reference is done in an inferior method when compared to modern tools (e.g. the Can I Use website I linked). The problem with W3Schools is their tutorials which are outdated and contain laughably terrible coding practices (look at their JavaScript or PHP tutorials for examples).
If you genuinely believe W3Schools to be a quality resource then you're either a beginner programmer, never actually looked at W3Schools, or are an incompetent fool.

I may be coming across as bitter but that's because I'm tired of having to explain something that is so obvious so damn often on here, and I'm really doing this for the OP's sake, so as to ensure you didn't dupe him into learning from W3Schools. OP: don't use W3Schools. It will do more harm than good.

[Rawnern]

At 5/21/13 04:53 PM, Diki wrote: How is repeatedly loading a sound that may very well be used many, many times going to be faster?
What if he needs to stop the sound in the middle of playback? Or adjust the volume?

This is pretty irrelevant either way because the OP asked about playing music and not sound effects.

He can call stop playing the sound... and I know it was irrelevant to the question, but I'm just adding it to be nice. I remember having a lot of trouble finding a way to play sound effects in my recent HTML5 and this was the best fix I found.

As a reference material (e.g. for things like compatibilities, like what you linked to) I sort of agree with you as it's pretty much impossible to get wrong, but everything they may reference is done in an inferior method when compared to modern tools (e.g. the Can I Use website I linked). The problem with W3Schools is their tutorials which are outdated and contain laughably terrible coding practices (look at their JavaScript or PHP tutorials for examples).
If you genuinely believe W3Schools to be a quality resource then you're either a beginner programmer, never actually looked at W3Schools, or are an incompetent fool.

I can agree on that :-) share some tips if you want to tutorials and Q/A sites like Stackoverflow.

[Diki]

At 5/21/13 11:07 PM, Rawnern wrote: He can call stop playing the sound...

How? The code you posted creates a variable locally (that's what the var keyword does) and doesn't store it anywhere so the reference is lost once the function exits.

At 5/21/13 11:07 PM, Rawnern wrote: I remember having a lot of trouble finding a way to play sound effects in my recent HTML5 and this was the best fix I found.

There's nothing wrong with it per se, as it does properly loud an audio file and play it, but it isn't an efficient method for playing audio that is heard repeatedly. Imagine you're remaking Super Mario World; if you were to use that code for the jump sound effect you would be creating an audio element every single time the player jumps (which will be like every 2-5 seconds) and will be loading the audio file every time if the browser didn't cache it. In a situation such as that you would be better off creating one audio element and just repeatedly playing it.

Even if you're going to be using it for a sound you're only ever playing once you may as well just do this:

function playSound(filepath) {
  (new Audio(filepath)).play();
}

It does the exact same thing and is more succinct (not that I would recommend either since they're both sloppy; store your references).

At 5/21/13 11:07 PM, Rawnern wrote: I can agree on that :-) share some tips if you want to tutorials and Q/A sites like Stackoverflow.

I don't bother going on StackOverflow to answer questions because there's too much politics over there (too much trust is put in their reputation system) and I just can't keep up with how fast it moves. It's a great place to find help, don't get me wrong, but it's just not somewhere I want to go to help people; I prefer having a one-on-one approach where I can have a discussion with the person (such as on the NG BBS).

But talking about StackOverflow is wayyy off topic. :)

[Rawnern]

At 5/22/13 12:49 AM, Diki wrote: I don't bother going on StackOverflow to answer questions because there's too much politics over there (too much trust is put in their reputation system) and I just can't keep up with how fast it moves. It's a great place to find help, don't get me wrong, but it's just not somewhere I want to go to help people; I prefer having a one-on-one approach where I can have a discussion with the person (such as on the NG BBS).

But talking about StackOverflow is wayyy off topic. :)

Stackoverflow (in my opinion) gives a wide range of answers. The reputation points are there just to make it more encuraging for people to give good answers/research. The person who asks picks out the one that helped them :) People can also change and update answers in the future to make them more up to date.

Anyways... how about these?
https://developer.mozilla.org/en-US/docs/JavaScript
http://warmseaorchard.com/Lessons.html
http://www.html5rocks.com/

[Diki]

At 5/22/13 10:53 AM, Rawnern wrote: https://developer.mozilla.org/en-US/docs/JavaScript
http://www.html5rocks.com/

These are solid resources.

At 5/22/13 10:53 AM, Rawnern wrote: http://warmseaorchard.com/Lessons.html

Took a quick glance at this and can't recommend it for two reasons:
1) It's incredibly poorly designed and the code snippets have no syntax highlighting or formatting.
2) The author apparently doesn't know how JavaScript is actually parsed and is putting the opening curly braces on new lines (which is a JS faux pas).

Basically this guy strikes me as an amateur; nothing wrong with that per se but amateurs shouldn't be teaching people.