Jump to content

  • Log In with Google      Sign In   
  • Create Account


html5/javascript best way to add sound


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
5 replies to this topic

#1 JackBid   Members   -  Reputation: 453

Like
0Likes
Like

Posted 04 February 2013 - 11:30 AM

I have been working on one of my first ever games, which is a game developed with the html5 canvas element and javascript. I am at the stage where really all I need to do now is add sound and music. here is what I am looking to do:

 

  • A song that plays whenever the game is played, this should also loop.(Basically just a game soundtrack that always plays.)
  • A clicking sound effect for when a button is clicked on.
  • A sound effect for when the player collects a coin.
  • A sound effect for when the player dies.

 

I know that you can have an html audio file, however this requires the user to click a play button for the music to begin. I was wondering if the follow is possible:

 

  • Add a html audio element.
  • Use css to style it to be invisible.
  • Create a function in javascript which plays the required sound. So I would call the function which plays the game music from the beginning, and a clicking sound function when a button is presses etc. 

Would this be possible or is there a better way entirely to achieve this.



Sponsor:

#2 Ravyne   Crossbones+   -  Reputation: 6955

Like
1Likes
Like

Posted 04 February 2013 - 09:52 PM

Exactly that is possible.

For background music this will work perfectly well in most cases.

sound effects will be subject to varying degrees of latency, however, so don't expect frame-accurate sound effects. This may or may not be a big deal to you.

Some mobile browsers (iOS browser, last I heard) only support one concurrently-playing audio element though, so you'd want to detect that and disable sound effects.

There's also the WebAudio API on Chrome and/or Mozilla, but its not standard. Hopefully it will be in the future.

#3 EmployeeNumber8   Crossbones+   -  Reputation: 1103

Like
1Likes
Like

Posted 05 February 2013 - 09:13 AM

The best thing to do is to use the WebAudio api, and fallback to creating Audio elements if WebAudio is not supported. The reason you want to fallback to the Audio tag is because it is very limited. I find that IE doesn't do a great job with multiple Audio elements. Chrome doesn't do a good job either. Last time I checked - Chrome creates TWO threads for each Audio element, and there is a hard limit of 100 threads (I think), so if you're not careful your app will crash, randomly, and you'll have no idea why.

The chrome://media-internals/ about page can help you see how many are in use due to Audio. 

 

You will also need to create audio in MP3 format and OGG format since IE does not currently support OGG, and last time I checked, Firefox does not support MP3.

Mozilla actually does not support WebAudio yet, but it is in the works.

 

 

HTML5 audio is a pain if you're doing something advanced.

 

If you don't want to deal with this stuff yourself, then you can just use an audio framework like Howlerjs



#4 Ravyne   Crossbones+   -  Reputation: 6955

Like
0Likes
Like

Posted 05 February 2013 - 05:38 PM

I was discussing this with another developer who has written an HTML5 game, recently. Here's the thread.



#5 True Valhalla   Members   -  Reputation: 169

Like
0Likes
Like

Posted 14 February 2013 - 04:59 AM

Definitly WebAudio API. But, you're not going to find perfect support for sound yet. I personally prefer to not include audio in my HTML5 games at this point. HTML5 is about cross-platform compatibility, and audio in HTML5 currently fails in that regard.


During the past year I've generated tens of thousands of dollars making games for the mobile web, so I wrote a book: Making Money With HTML5


#6 Yrjö P.   Crossbones+   -  Reputation: 1412

Like
0Likes
Like

Posted 14 February 2013 - 11:43 PM

This would work on all desktop browsers since it uses Flash for output instead of the half-baked HTML5 audio.
I'd go for it if I was serious about getting proper sound.

http://www.schillmania.com/projects/soundmanager2/




Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS