goldfire / howler.js Goto Github PK

To work around IE9's inability to play audio sprites well, I am using separate audio files when the browser does not (yet) support the Web Audio API (IE9 and Firefox).

Each file gets its own "Howl" object. Using Firefox/HTML5 audio: at first these files play when you click their button, and if you quickly click again they play again. But 2 seconds after the first time they were played, clicking will no longer play the sound.

Curiously enough, 2 seconds is also the duration of the audio files. So it seems that something is going amiss when the audio clip ends?

Click the keys of the keyboard on this page to see it happen:
<< url removed >>

This happens with each of the following three versions of howler.js: 1.0.10, 1.0.8, and 1.0.7

Trying to play two audio sprites from the same audio file immediately after each other, like so:

myAudio.play( 'soundA' );
myAudio.play( 'soundB' );

Resulted in a glitch with Firefox / HTML5 Audio. Often the whole audio file would play, and not just a single sprite. (It worked fine in Chrome / Web Audio API.)

I found a hack / work-around that seems to prevent the problem:

myAudio.play( 'soundA' );
setTimeout( function(){ myAudio.play( 'soundB' )} , 1 );

Using Chromium (Version 28.0.1500.52 Ubuntu 12.10), the howler.js demo silently fails without any thrown exceptions or warnings in the console.

Silently, i.e. none of the sounds play but the XHR that loads them appears to be completing without any issues.

Let me know if there's anything more specific I could do to help pinpoint the issue.

I tried the following code:

var h = new Howl({
    urls:["sounds/sound.ogg","sounds/sound.mp3"],
    loop:true
});

When I log h with Firefox, the _duration variable is NaN and playing the sound, besides sounding totally wrong, slows the browser to a crawl until I have to force quit it. This works on Safari and Chrome.

I tried using setting a duration with the object sent in the new Howl, but the resulting duration is also NaN. Is this a known issue? Could I be doing something wrong?

I'm testing on Firefox 20.0 for Mac.

Thanks.

Are there known issues with the iPad and audio? I don't seem to be able to get howler.js to play mp3s on the iPad or iPhone. It stays silent. :(

Also, on Chrome when I try to use fadeIn and fadeOut I get no sound at all. :/

TIA for any help!

My .pos3d demo code works fine with the slightly older "howler110.js" file. However when I try to link to the newest library, either howler.js or minified howler.min.js, the 3D functionality goes away. Also, there seems to be a repeating delay or echo in the sound.

Something is not getting hooked up right, maybe with the panner node or destination node. I'll keep an eye out, although since this is not my library, I don't know how good I will be at finding a typo or bug in the code.

I will try though!

 var AllSounds = new Howl({
          urls: ['sounds/all2000.mp3'],
          sprite: {
            Excellent_howler: [0, 1000],
            GoodJOb_howler: [2000, 3000],
            GreateJob_howler: [4000, 5000],
            wellDone_howler:[6000,7000],
            num_howler1:[8000,9000],
            num_howler2:[10000,1100],
            num_howler3:[12000,13000],
            num_howler4:[14000,15000],
            num_howler5:[16000,17000],
            num_howler6:[18000,18950],
            num_howler7:[20000,20950],
            num_howler8:[22000,22950],
            num_howler9:[24000,24950],
            num_howler10:[26400,27100]  
        }

        });

And here is the function from which i am calling howler sounds.

Since the whole sprite sheet was playing ,therefor used Allsounds.stop after every second .

function countingTimer(totalNumber,displaynumber){
        if(displaynumber>1){
             console.log('inside clear timer');
             clearTimeout(timer);
             AllSounds.stop();
           }
        if(onmain_screen==false){  
          console.log('totalNumber:'+totalNumber+'displaynumber'+displaynumber);

           if(displaynumber<=totalNumber){         
              stage.update();
              //playing sound
              //createjs.Sound.play("num_sound"+displaynumber)
              AllSounds.play('num_howler'+displaynumber);
              //soundManager.resume('sound_'+displaynumber);
              //soundManager.play('sound_'+displaynumber);
              //soundManager.pause('sound_'+displaynumber);
              countingText.text=""+displaynumber;

              countingText.x=countingTextCordinates[randomArray[0]][displaynumber][0];
              countingText.y=countingTextCordinates[randomArray[0]][displaynumber][1];        
               console.log(countingTextCordinates[randomArray[0]][displaynumber][0]+":"+countingTextCordinates[randomArray[0]][displaynumber][1]);
               if(displaynumber==1){
                stage.addChild(countingText);
               }else{
               }

                stage.update();
                displaynumber++;
                var t=totalNumber;
                //var f = countingTimer;  //use 'this' if called from class
                //f.parameter1 = totalNumber;
                //f.parameter2 = displaynumber;
                console.log('timer is started');
                 timer=setInterval(function() { countingTimer(t,displaynumber); },1500);

                //setInterval("countingTimer(totalNumber,displaynumber)",3000);    
            }else{
              if(givenanswer){
                viewTrueAnswer();
              }else{
                viewWrongAnswer();
              }
            }        
          }
        }

Hello,
I would like to submit a pull request for enhancement. With this I would ideally send the request with the minified code. What system, command, options are you using to minify the code?

Thanks,
Ross

Hi,

here is my test code:

var sound = new Howl({
urls: ['http://a1704.phobos.apple.com/us/r1000/086/Music/ec/12/fc/mzm.ayuevuim.aac.p.m4a'],
buffer:false,
onload: function(){console.log('onload')},
}).play();

and it will work when I use buffer:true.
please help, thanks.

to fix it I changed line 11119 from define('Howler', function() { to define([], function() {

I take it the dependency on 'Howler' is a throw back to multiple modules being loaded in the same file. issue #34

Hi thanks for this library, very nice!

I do have issues with loops. This example works in firefox 20 - http://jsfiddle.net/sFbDq/

http://jsfiddle.net/akLXq/2/ - that doesn't. After first sound stops playing wait couple of seconds and you'll hear that multiple sounds play.

Also when I try to use loop:true it only plays two times - http://jsfiddle.net/3dD8u/2/

Thanks

I'm trying to change the sound urls with the urls() method, but it doesn't work. When I try to play() after change the urls, nothing happens.
I tried on Chrome 28:

var mySound = new Howl({
  urls: ['sound.mp3'],
  autoplay: false
});
mySound.play(); // It works!

mySound.urls(['another_sound.mp3']);
mySound.play(); // It does nothing.

I implemented howler.js with click on an image. I register the image like this:

$(document.createElement("img")).attr({ src: './goldfire.jpg'})
            .addClass("image")
            .click({param1: audioname}, cool_function)
                .appendTo("#imagecontainer");

and before that:

       function cool_function(event){
        var sound = new Howl({urls: ['./audio/'+event.data.param1]}).play();
}

which works very nicely on Safari on MacBook Air, and on iPod and iPad. Chrome also ok. But FF20 no sound. The audio is a 96kb/s mp3.

If I try to load a file in the 79mb + file the plugin will not start playback before the full file is downloaded and it never gets to download the full file. It will crash before.

Thank you to everyone for all the amazing feedback, with your help we are building the best audio library on the web! I'd like to announce that a new branch has been opened (https://github.com/goldfire/howler.js/tree/1.1.0) that contains the current changes for 1.1.0. There have been a lot of behind-the-scenes changes, so I'd like to do more testing than usual for this update to weed out the edge cases before merging into master and declaring stable.

• ADDED: New pos3d method that allows for positional audio (Web Audio API only).
• ADDED: Multi-playback control system that allows for control of specific play instances when sprites are used. A callback has been added to the play method that returns the soundId for the playback instance. This can then be passed as the optional last parameter to other methods to control that specific playback instead of the whole sound object.
• ADDED: Pass the Howl object reference as the first parameter in the custom event callbacks.
• ADDED: New optional parameter in sprite defintions to define a sprite as looping rather than the whole track. In the sprite definition array, set the 3rd value to true for looping (spriteName: [pos, duration, loop]).
• FIXED: Improved implementation of Web Audio API looping.
• FIXED: Various code cleanup and optimizations.

Please test out the new code and open any new issues tagged with 1.1.0 if you find problems. This is also a good time to submit feedback for other ideas or improvements you think should go in this release.

Hi, I'd like to assign self._webAudio to false when constructing Howl object.

The reason is that html5 audio is CORS tolerant and I'd like to play sounds from other domains without making an XHR request every time.

Hi James and all,
James I know you have a lot on your plate right now, but with possible reworking of some of the aspects of Howler's positional methods, I wanted to try to throw in a couple of feature requests that would be relatively easier to implement now, during possible re-structuring, rather than later as an afterthought.

Two effects come to mind when having a robust audio engine for games. The first is almost a necessity - compression. If the developer has too many sounds playing at the same time and a possible background track going on, the audio will become distorted due to clipping. May I suggest a howler.compressor object to limit the final output of the app's audio and to help keep in check the overall volume when the gameplay sounds get heavy (like a sudden firefight in a war game).

The second isn't so much a necessity as it is a cool effect that is difficult to hard-code ourselves, or re-record everything with the effect added. This is a Low-Pass Filter. For those of you non-audio buffs out there, it is essentially a muffling effect. It limits all the high parts of the audio spectrum (imagine speaking while cupping your hand over your mouth). The volume remains the same, but only the low parts pass through.

I can think of a couple of situations where a filter would come in handy - one is in a FPS when the player gets knocked by a nearby grenade or something, a muffled-world sound would ensue as well as red-tinted-screen 'damage' effects or whatever the developer wanted. The second case would be people talking or a club-music atmosphere going on in another room. As you approach the room from outside, the voices or music sound muffled, and when you open the door, the developer switches howler.filter to Off and then you can hear the high parts of the sounds again (just like in real-life).

So in summary, howler.compressor(amount) and howler.filter(frequency). The lower the frequency, the more muffled, the higher the frequency the less muffled the sound becomes. We could even use this feature to code a sweep of that frequency parameter and go smoothly from totally muffled to totally bright (as DeadMau5 makes money doing every night - haha).

Implementing these with Web Audio API is trivial. It's probably 4 or 5 lines of code for each effect. It involves creating the filter or compressor and then hooking them up with the .connect() function to the final audio destination (your speakers). As usual the Web Audio API overkills and gives you total control over every possible parameter if you want to design a synthesizer, but we just need a one-size-fits-all function with maybe 1 adjustable parameter to keep things simple and useful for gaming applications.

Please let me know what you all think.

Line 48: if (vol && vol >= 0 && vol <= 1) { This if construct makes the volume() function silently fail when passed a non-number, but testing for vol as a boolean value makes the function also fail when vol is zero.

That line should be if (typeof(vol) === 'number' && vol >= 0 && vol <= 1) {
because your check will pass if the volume() function is passed something like "1", which leads to a string being stored in the _volume variable, which can lead to issues when performing arithmetic on the result of accessing the volume() property. ".5" + .5 becomes ".50.5"

I think this is a serious flaw of the library.

Hello,

When using
var ambient = new Howl({
urls: ['/ambient.mp3', '/ambient.ogg'],
volume: 0.3,
loop: true
});

I have noticed the sound in only played twice under FF. It works under Chrome on the contrary.

I'd like to see methods for setting velocity and orientation on howls. I'd also like to see some means of setting a listener position, orientation and velocity.

If there are no plans to do this within the week, I may have time to hammer out a pull request, but in order to reduce friction in having it accepted, it might be nice to discuss implementation here. Specifically:

• Have "velocity" and "orientation" methods on Howl similar to pos3d, only without the non-Web Audio path. For non-Web Audio they'd simply be no-op, and it'd be up to the developer to present an alert if these advanced features are used and it is felt that they are necessary to the audio experience.
• Create a listener lode as a local variable on Howl.
• Add Howl.listenerPosition, Howl.listenerVelocity and Howl.listenerOrientation methods to set the listener's attributes. I assume that there is never more than one global listener in a Howl app. If there is, then perhaps the app needs more sophistication than Howl can offer.

As an aside, it might be a good idea to create a new method for setting position and deprecating pos3d, since this feature would add many additional 3-D attributes to sound. Maybe reserve position() for 3-D sound, add offset() as a synonym for pos, then deprecate pos/pos3d for a future 2.0 release? I won't implement that now (except for maybe the position() synonym if asked) but I'm tossing it out there as a thought.

howler.js v1.1.1 and v1.1.2 worked fine where you can use it locally. Pulling up a webpage at file:///c/users/me/index.html would play the sounds through Howler. However, now I get CORS issues with v1.1.4.

There is an issue in Chrome, where many audio tags crash the Chrome renderer process (https://code.google.com/p/chromium/issues/detail?id=156331 , it is marked as fixed, but the crashes still happens, see my comment there).

To reproduce the crash in a somewhat realistic use case:

  setInterval(function() {
    new Howl({ urls: ["http://assets.sauspiel.de/sounds/effects/applaus-61-90Punkte-1.mp3"], buffer:true }).volume(1).play()
  }, 1000);

In Mac OS X's Activity Monitor you can follow the Thread count of the Chrome renderer process going up and never down. At about 400 threads the renderer crashes (without leaving crash reports, of course) after playing about 200 sounds.

In contrast if one uses HTML5 Audio without Howler, e.g.

  setInterval(function() {
    var audio = new Audio("http://assets.sauspiel.de/sounds/effects/applaus-61-90Punkte-1.mp3");
    audio.play();
  }, 1000);

The process' thread count still goes up continually, but get's down again when a garbage collect is triggered (as can be seen in the Web Inspector Timeline), making a crash less likely at least.

Master volume that would dictate the maximum volume for all sounds. Example:

Master volume is set to 0.6, that means that sound with volume 0.5 will have an effective volume of 0.3.

And it would be awesome if I could have multiple "master instances", so I could create one for background music sounds, one for sound effects...

This would allow me to create a nicely configurable sounds volume UI you see in almost any game.

Though to do this, howler would need some re-factoring, so no pressure :)

It could be useful to have a loaded property so that we don't try to play the sound before is it set to true

On line 92, self is not defined. I'm not sure if you meant to return this or undefined. I assume you meant to return this seeing as the doc-string says "return {Object}". I'm not entirely sure if this has any implications, I'm literally just reading code that is used by a lot of people trying to pick up some tips, etc.

http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library

Try quickly play "blast" and "laser" sounds.

P.S. I'm using Opera 12.13 and FF 18.0.1 on Linux OS - I can't check existence of this issue on Windows system.

Is it possible to play a single Howl at different volumes? In my example: I have an explosion sound that needs to be softer the further a player is away from the event. Do I have to create a new instance of a Howl for this? I was hoping to reuse the existing Howl, something to the effect of:

sound.play({ volume: 0.25 });

Here is my test:
http://play.esviji.com/howler-tests/test.html

Safari supports the HTMLAudioElement only when quicktime is installed.
If quicktime is missing, "new Audio()" throws an exception.

By the way... Awesome library =).

With both howler.js 1.0.11 and 1.1, in IE9, using non-sprite HTML5 audio, the audio clips will play at first, a few times (5?) and then will stop responding when you click to play them. At that point different audio clips will play once each but not again. This happens both with 1.0.11 and the most recent 1.1 branch.

I thought it might be a problem with the playback position not getting reset to 0, but it appears to be a problem with not finding an inactive node to use. I traced it back as far this function (around line 790 in 1.0.11):

/**
 * Get the first inactive audio node (HTML5 audio use only).
 * If there is none, create a new one and add it to the pool.
 * @param  {Function} callback Function to call when the audio node is ready.
 */
_inactiveNode: function(callback) {
  var self = this,
    node = null;

  // find first inactive node to recycle
  for (var i=0; i<self._audioNode.length; i++) {
    if (self._audioNode[i].paused && self._audioNode[i].readyState === 4) {
      callback(self._audioNode[i]);
      node = true;
      break;
    }
  }

The if clause stops resolving to true and so the callback to play the audio stops getting called. I haven't had time to test any further with it yet. (I have to go to a library to test with IE9, which is why I didn't catch this before.)

This might have been caused by my fix for issue #15. Before that fix non-sprite audio would also be paused on completion. After that fix it is not paused (so that the playback position can return to zero, and not get paused/stuck at the end of the track). So, if IE9 does not automatically set an audio clip to "paused" when it finishes playing, then that would cause this problem.

If that's the case, here are 2 possible fixes:

1. figure out what state IE9 audio ends up in when it finishes playing, and have this if clause also check for that, in order to identify those inactive nodes.
2. revert the fix for issue #15, so that all HTML5 audio is paused upon completion, but then explicitly reset the playback position to zero if the audio is not a sprite.

I should be able to work on this a little more tomorrow.

Here is an example - http://jsfiddle.net/bsPpA/1/

Is it possible (or are you planning to add support) to record?

Thanks!

How do you unload/destroy a sound once you're done with it and want to release it? Normally I'd expect to see an API method for the expressed purpose of deprecating media, such as unload() or dispose(), that will stop the sound's playback, loading, and release all references to it.

Lacking a formal cleanup API method, is simply calling stop() and then orphaning a Howl object really memory-safe?

I have been looking into options for my game, and came across howler, it looks great! Thankyou for all the hard work you guys have put into it, and I hope you get lots out of making it open source!

Anyway. I want to use sprites, but I want to have the ability to start, stop, pause, fade (in/out) and loop, but on individual sprites (not the whole sound). Looking into the API it looks as though all this functionality is only implemented for the sound as a whole. For example it would be nice to make one sprite item fade in and play once, while a second sprite item starts without fade and loops. Am i missing this ability in the API? (If so could you provide an example of how to do the above) or is this possibly planned for future release?

Hi,
Thanks for the great library.
I have a problem when resuming a music which must loop: only a small portion of the sound loops, it doesn't restart from the beginning. I guess that the current position ("pos") is somehow corrupted.
Here is how to reproduce it:
1/ Load some sounds (I do it in a class)

// sound
sound: false,
soundFX1: new Howl({urls:["SFX1.mp3","SFX1.ogg"]}),
soundFX2: new Howl({urls:["SFX2.mp3","SFX2.ogg"]}),
soundFX3: new Howl({urls:["SFX3.mp3","SFX3.ogg"]}),
music: new Howl({urls:["music.mp3","music.ogg"], volume:0.5, loop:true}),

2/ Start the music on a click event:

toggleSound: function () {
        if(this.sound) this.music.pause();
        else this.music.play();
        this.sound = !this.sound;
}

3/ Play some sounds:

playSoundEffect: function () {
if (this.sound){
        var playablesounds = [this.soundFX1, this.soundFX2, this.soundFX3];
        var soundtoplay = playablesounds[getRandomInt(0,2)];
        soundtoplay.play();
    }
}

For information: function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

4/ Toggle sound near the end of the music by calling toggleSound() : only a small portion of the sound will loop. I could not determined exactly how or when it happens...

For now I decided to replace "this.music.pause();" by "this.music.stop();". It is not the behaviour I want, but it works.

Not sure if I'm not getting some aspect of Howler, but there seems to be no method for determining if a given howl is playing.

I'm using an entity system in which entities can indicate a "presence" sound. If the game is active, then any entities with a presence sound should have that sound played. Unfortunately, if I simply loop through all entities and call play() on their registered howls, I get many instances of the same sound overlaying each other.

I'd like it if I can check if a given howl is playing, then not call play(). Or, better yet, perhaps play() could do this check and not start multiple instances...unless one howl is intended to support multiple sounds, in which case it'd be nice to track playing per instance.

Hi!

This is my problem:

1. I use this code to preload sounds. It works fine on all desktop browsers:

var sound = new Howl({
    urls: files,
    onload: function() {
        ++self.soundsLoaded;
    }
});

2. I clear cache on my iPad and close the Browser.

3. I load the website, and the sounds are totally weird. Like they were in slow motion.

4. I reload the website... and everything goes right and the sounds can be hear perfectly well.

You can check the problem here:

http://www.edshark.com/ocean-of-words/

It happens with iOS Safari and specially on iOS Chrome. What can I do?

Thanks!

When I want to play sound

$this.sound = new Howl({
            urls: ['sound/sound.mp3']
    }).play();

it throws me this error

TypeError: i is undefined
[Break On This Error]   
...Timer[0]);r._onendTimer.splice(0,1)}if(n){if(!r.bufferSource){return r}r._pos+=t...
howler.min.js (line 10)

For some reason, some systems (maybe in a specific network) return "Infinite" as audio duration. This causes the plugin to go crazy when you loop a sound, 'cause it immediately fires the end event when played. I think it's a pretty rare issue, but it happened on some client's machines in firefox only (version 22.0).

Currently versioning appears to be managed by named branches, although this is useful for manual installation, most packaging tools don't know how to handle this.
It would be far more friendly to add versions as tags onto the code, this way we can use bower, npm and probably some others, to consume howler.js automatically!

Hi James,
I opened this issue in relation to the recently closed issue that I had started. I feel this is still a relevant issue. There is a pausing problem while trying to use the new .pos3d() method to pan a sound, then playing a sound once, twice, or repeating the sound rapid-fire (like a machine-gun effect in a game).

I found the problem magically goes away when I make a simple boolean change to your howler.js code:

       // set web audio node to paused at end
        if (self._webAudio && !loop) {
          self._nodeById(data.id).paused = false; //changed to 'false' by erichlof
        }  

This came from the play: function . I'm sorry this is kind of a hack and I don't really understand the inner workings of howler well enough to know why this works, but it does.

Can you safely work it in to the next version so we can use the .pos3d() method with the intended results?

Thanks James. Howler 1.1.1 rocks!

Great Library guys! I would like to request a feature, or method to the sound library. In the Web Audio API, you can create a panning node and set Position (x,y,and z if you need the 3rd dimension). This will pan the sound left and right depending on the listener position and sound source position. Is it possible to add this panning capability to your wonderful library? Thanks!

Firefox/IE - both Linux and Windows

Not sure what causes it but first thing revised should be timers clearing method and the process beyond pausing actual node.

Try using this code in console to invoke the buggy behaviour (several times if needed):

for(var i = 0; i < 5; i++) someHowl.play("spriteKey")

However maybe it is just me :)

The documentation for on(event, callback) does not document what events I can bind to. Is there a list anywhere?

howdy!

We're playing around with howler, and it's really sweet.

What we're currently trying to work out however is how to generate an mp3 sprite and timing info most effectively. We have a bunch of small mp3s that we'd like to bunch together, and also probably generate a json or a dictionary to fit in the the new Howl statement.

Any suggestions on external tools (preferably in linux bash / python / ruby environment)?

I get the following error when trying to use howler.js locally without a webserver:

XMLHttpRequest cannot load file:///C:/Users/Scott/WebstormProjects/guess_the_number/bird.wav. Cross origin requests are only supported for HTTP. howler.min.js:10
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101

I know the issue... that I need to use an http URL isntead of file:///. So that means I need a local webserver to develop on. However, I don't want to do that for several reasons. For one, I don't get the live editing feature that WebStorm provides. I'm also trying to teach kids JavaScript with howler.js. I don't want to teach them about webservers at this point yet. Anyway, is there a way to use howler.js without using a webserver?

I know the HTML5 <audio> element can use file URLs. Can I force howler.js to fallback to this method for local files?

hi
i have played a little and i used the lib in a wrong way i think, but in this way i found a bug.

if you generate 2 Howl object with the same audio file then the second on has a duration of "0". You can not play this second file.
my proposal
change:

...
var loadBuffer = function(obj, url) {
// check if the buffer has already been cached
if (url in cache) {
loadSound(obj);
} else {
// load the buffer from the URL
var xhr = new XMLHttpRequest();
...

to:
loadSound(obj, cache[url]);

This is a browser issue, not a library issue, but it would be a real nice-to-have. Check out this loop: http://jsfiddle.net/qyXtT/1/

There's a slight gap between end and start on loop. Is there any way to fix that? It's especially bad for the more ambient sounds, like this rain file, or ambient music. Cross fade?

To add to the note about it being a browser issue, I searched the Chromium dev for an issue, couldn't find one. I might open one; looping should be seamless (same for video). But browsers do a slight pause-gap. Tsk, tsk.

Return value from sound.pos() (without argument, i.e. getter) depends on sound._loaded, which took my by surprise. IMHO sound.pos() should always return number and sound.pos(pos) should always return sound.

I stumbled upon this when debugging random fails with arithmetics involving sound.pos(), which I expected to always return a number.