EzDevInfo.com

howler.js

Javascript audio library for the modern web. howler.js - Modern Web Audio Javascript Library - GoldFire Studios browsers have come a long way over the years, and we are now able to achieve amazing results using all of the great new technologies often referred to as html5. however, generally speaking, audio...

Get a sounds length (duration) in javascript

I am using howler.js to manage sounds within my html/css/js project, everything is working fine, the only point that took me hours of research without success is: How can I get the length of a sound using howler.js methods?


Source: (StackOverflow)

How to chain sounds on howler.js

I need to play some sounds in howler.js the thing is that I don't know how to chain it.

For example, at string BCG

would need to play b.ogg then c.ogg and finally g.ogg

If I just use (after loading):

sound.play('b');
sound.play('c');
sound.play('g');

All of them start and overlap which isn't what I need.

I see there's a onend property, however can't figure out how to use it properly.

Regards.


Source: (StackOverflow)

Advertisements

Audio never loads on iPad but it works perfect on emulator - PhoneGap + Howler.js

I am using Howler.js on my PhoneGap application. Because my audio files are large (more than 10Mb) im an setting the buffer attribute to true (forcing HTML5 Audio).

var theSound = new Howl({
  urls: ['assets/Sound.m4a'],
  buffer: true,
  sprite: {
    scene0 : [ 1966000, 27000] }

When I test my application on the emulator and my iPad Mobile Safari everything works well. But when I run the application on the iPad as an app, the audio never starts. Using the web inspector I have noted that the audio file tries to load again and again like an not ending loop. You can see an attached screenshot of the resources tab on the web inspector both both the emulator and the iPad, running the same PhoneGap app.

enter image description here

Any idea on what could be the problem?


Source: (StackOverflow)

Howler.js buffering problems

Okay, first and foremost. I have little to none coding knowledge however my English is alot better than our coder so that's why I am making this question. So we have a audio client on our server so that we can run audio from the browser as that takes up less space (game = minecraft). The only problem that we have is that the version, or any version in that matter has the same buffering bug that we cant fix.

What is happening is that after about 30 seconds the audio just stops buffering resulting in the audio being cut off... I've looked around and seems that we are not the only one but no answer to our problem as of yet... Anyone here that could help us out?

Buffering problem Howler.js V1.1.25


Source: (StackOverflow)

Preload howler.js sound files with preloadJS

I have a game that uses preloadJS to load the assets. I'm having all kinds of problems with sound on iPads using soundJS but from tests it seems that audio plays fine using howler.js so I'm thinking about using that library for the iPad.

My question is, is the a way to access and play sounds with howler.js that have been preloaded with preloadJS?


Source: (StackOverflow)

Playlist of audio files within HTML5 webapps?

Given an array of urls corresponding to as many audio files such :

     var playlistUrls = [
        "./audio/cmn-ni3.mp3",
        "./audio/cmn-hao3.mp3",
        "./audio/cmn-lao3.mp3",
        "./audio/cmn-mao3.mp3"
        ];

How to play these files as a playlist [one at the end of an other] in the same order as the provided array of urls ?

I have a preference to do that in the scope of howler.js, since it provides various HTML5 fallbacks.


Source: (StackOverflow)

WebAudio on iOS - Can't play sound from swipe of carousel [duplicate]

As I understand it, on iOS you can't autoplay a sound and it must be triggered from a user action.

I am using howler.js to handle the audio and I have a carousel (http://idangero.us/swiper/demos/). I'm trying to trigger a play() from the onSlideChangeEnd callback of the slide changing. This just remains silent on iOS. However, it does work if I just add an on click handler to a button on the page. It works fine on a desktop (i.e. chrome).

Is there a way to get it work from the change of a slide / swipe rather than a click event?


Source: (StackOverflow)

When wrapped in MeteorJS cordova HowlerJS sound doesn't play on android

sound can be heard fine on a mac chrome, on iOS safari and app, on android chrome, but on android app (both on actual device and emulator) it just doesn't produce any sound at all. sound.playing() returns true.

example code (coffeescript):

sound = null

Template.playerPage.onCreated ->
   path = "/meditations/filename.mp3"

  sound = new Howl {
    src: [path]
    html5: true #it behaves the same with html5: false too
  }

Template.playerPage.events {
  'click .player-play': (e) ->
    sound.play()
}

any clues on what could be going wrong? I was thinking about paths, but they seem to always be "/meditations/filename.mp3" in all the environment in which sound actually works, so I wouldn't think it's that


Source: (StackOverflow)

howler.js not working in Android 4.4.4 native browser

I am using howler.js for playing audio in one of my project, I am able to play audio file using howler.js in android native browser for first time. After page refresh audio does not play.

But works fine in google chrome after page refresh also. Any one else faced this issue ?


Source: (StackOverflow)

Play/pause using howler.js with meteor framework

Okay, so I'm trying to let users play/pause when they click on the gif once or twice. I currently have it set up where the user could only play the sound once without stopping it.

I'm using the javascript audio library howler.js and the meteor framework.

Below is the code:

Template.gif.rendered = function () {
    freezeframe_options = {
    trigger_event: "click"
};

$.getScript("/client/scripts/freezeframe.js", function () {
    $(".gif").click(function () {
        if (!$(this).hasClass('played')) {
            var gifId = $(this).attr("data-gif-id");  // Will return the gif ID number
            var soundFile = $(this).attr("data-sound-file"); // Will return the sound file

            var fileFormat = "mp3";
            var mp3Test = new Audio();
            var canPlayMP3 = (typeof mp3Test.canPlayType === "function" && mp3Test.canPlayType("audio/mpeg") !== "");
            if (!canPlayMP3) {
                fileFormat = "ogg";
            }

            var sound = new Howl({
                urls: ['sounds/' + soundFile + '.' + fileFormat]
            }).play();

            $(this).addClass('played');
        }
        ;
    });
  });

};

Source: (StackOverflow)

Howler.js Pos method issue

I am attempting to use the pos(x,y,z,[id]) method of howler js to set the x panning (left and right). It works when I assign it the value -1 or 1, but when I assign it the value 0, it starts making some strange noises I would not expect. What I would like to do, by doing pos(0, 0, 0), is to restore the sound to the original position.

See: https://github.com/goldfire/howler.js/tree/2.0#plugin-effects-methods

Does anybody know how to work that out?

Thank you.


Source: (StackOverflow)

Load audio from local memory and play sprites

I am not an expert so please be patient with me.

I would like to know how to load an audio from file and play a sprite. This is the pseudocode, hope that it will help to make you understand:

  • Ask for the path of the audio
  • Write the timeA in milliseconds (When the program has to start to play)
  • Write the timeB in milliseconds (When the program has to stop to play)
  • Play the Sprite from timeA to timeB

I am using this library https://github.com/goldfire/howler.js. Is there a way to create automatically the sprites with this?

Please help me! Thank you in advance.

I know that it would be better to post some code, but I really do not know where to begin.


Source: (StackOverflow)

Howler.JS + Angular - path for playing sound file

I'm trying to play mp3 file in cordova + ionic hybrid app.

Sound is stored in:

www/sounds/dubstep/sound.mp3

And i'm trying to play file from service placed in /www/scripts/services/global.js using following code:

var sound = new Howl({
     src: ['sounds/dubstep/sound.mp3'],
     onend: function() {
         console.log('Finished!');
     },
     onloaderror: function() {
        console.log('Error!');
    },
});

sound.play();

But it is always throwing onloaderror.

How I should set path in right way?

Thanks for any help.


Source: (StackOverflow)

How to play a seamless loop from an AudioSprite in AS3, without SAMPLE_DATA

I created a batch of sounds assembled with this tool:

AudioSprite

https://github.com/tonistiigi/audiosprite

The output is generally used for JS libraries, such as Howler, Zynga Jukebox, or SoundJS - but I wanted to see if it's possible to implement in AS3.

I started creating a Sound player that can load, parse and play the sounds based on the JSON and MP3 file this tool generates.

So far so good! ... except for loops.

Now, the big question is - is there a way to play a Sound-loop seamlessly given that all music & sounds coexist in the same MP3 file, and it has a start & end range to play and stop it?

Example of how the sounds are placed in the file:

mygame_sounds.mp3 = [BUZZ + LASER + BOING ... + TRACKLOOP]

I'm looking for a solution that does not involve using the SAMPLE_DATA Event (given it eats up a lot of CPU usage). If there's no way around it, please explain why.

So far I've had mild success using flash.utils.Timer objects triggered after a given AudioSprite's duration, but it's not consistent.

To stop / dispose of a non-looping sound, I rely on a Master Timer (running at very short intervals) and that seems to "cut" the sample appropriately. But I already tried using this Master Timer to play a looped-sound over and over - same latency issues.

Is there any method to predict / measure how much latency is to be expected by the time the sound completes one pass?


Source: (StackOverflow)

howler.js play sound at a specific position

Hi I would like to start playing a sound on a scecific position. The api said that I can use .pos but it doesn't start where I would like it to start

  <p>This sound last 13 sec.</p>
  <h1>Audio</h1>
  <h3><a rel='nofollow' href="#" class="val2">2:00</a></h3>
  <h3><a rel='nofollow' href="#" class="val3">3:00</a></h3>
  <h3><a rel='nofollow' href="#" class="val4">4:00</a></h3>
  <h3><a rel='nofollow' href="#" class="val20">10:00</a></h3>

My javascript.

var son = [false, "0000"]

sound = new Howl({
    urls: ['http://goldfirestudios.com/proj/howlerjs/sound.mp3'],
    autoplay: false
    });

function playSequence(events,valeur){

  //if there is no sound play the track at a certain position
  var playSound = function(valeur){
    if(son[0] == true){
      sound.stop();
      son[0] = false;
    }else{
      son[0] = true;
      sound.pos = parseInt(valeur[0]); // position at 2 sec
      sound.play();
    }
  }
   playSound(valeur);
}

//play the sound on click
$("a.val2").on('click', function(events){
    valeur = $(this).text();
    playSequence(events, valeur);
    });

Source: (StackOverflow)