CreateJS / SoundJS

A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.
http://createjs.com/
MIT License
4.44k stars 835 forks source link

Problem with "complete" event in Safari 9.0.1 "El Capitan" #214

Open omishe opened 8 years ago

omishe commented 8 years ago

Hi!

I have a strange issue in Safari 9.0.1. The event on("complete") only works once and when I try to replay a sound and catch on("complete") event again Safari does not catch the event. Any idea about this issue?. No problem with Firefox and Chrome.

Thanks!!

lannymcnie commented 8 years ago

We will check this out.

lannymcnie commented 8 years ago

Tested on El Capitan (10.11.1) in Safari (9.0.1) with no problems. Can you let me know if you have the same versions, and if the problem persists?

omishe commented 8 years ago

Thank you for your response!

Yes, I have the same version, the event triggers perfectly, but when I attempt to reassign it again to the same object the event does not trigger again until I delete the object and declare it again (This is my momentary solution).

It is like if the event stays in cache and can´t be detected again until y I reload the browser in the natural way.

Thank you.

lannymcnie commented 8 years ago

Can you be more specific about what you mean by "reassign it again"? A code sample would help to get to the bottom of this.

omishe commented 8 years ago

Yes. A minimal excerpt of code:

var audio1 = "audio1";
function initAudios() {
    createjs.Sound.alternateExtensions = ["ogg"];

        createjs.Sound.registerSound("audios/audio1.mp3", audio1);
}

function initAct1() {
    btnEsfinge = $('#btnEsfinge');

    btnEsfinge.on('click tap', function(event) {
        event.stopPropagation();
        var audioPlaying = createjs.Sound.play(audio1);
        audioPlaying.on('complete', function() {
                        // This work once, a second attempt fails
                        console.log('Audio ended!');
            audioPlaying = null;
        }, this);
    });
}

$(document).ready(function(){
    initAudios();
    initAct1();

    // button to reinit application

    $('#btnReinitApp').on('click',function(){
        initAct1();
        // Here I reload the audio again, so it worked for me
        initAudios();
    })
});

This is a reduced excerpt of code, but essentially this is the idea about how it should work.

Thank you a lot!

lannymcnie commented 8 years ago

Thanks. It could be due to re-registering the audio that already exists. I will check it out.

lannymcnie commented 8 years ago

I tested out your code, and was unable to reproduce an issue. Tested in Safari on both Yosemite, as well as El Capitan.

One note: Your initAct1 method will append a click handler on the btnEsfinge each time you click it. So each time you restart, you get another console log per click. Note that I receive console logs each time, so the bug you describe is not happening.

  1. Load
  2. Play (1 console log)
  3. Restart
  4. Play (2 more console logs)
  5. Restart
  6. Play (3 more console logs)

The behaviour is expected with the way the code is written.

omishe commented 8 years ago

Yes, the code works well in this basic form, but if I comment or delete the call to function "initAudios ()" in the event the "#btnReinitApp" button bug appears only the first time the event '' complete '' It should be called in later called the event works well.

My complete application manipulates the DOM of HTML much saving it in a variable and then deleting it from the html and creating it again using the stored in the variable. The application is to run locally without the use of any server. I apologize for not having made a detailed code, here again the code including the allocation of the variable and the corresponding html.

// Scripts.js audio1 var = "audio1"; var photo; initAudios function () { createjs.Sound.alternateExtensions = ["ogg"]; createjs.Sound.registerSound ("Audio / texto1.mp3" audio1); }

initAct1 function () { btnEsfinge = $ ('# btnEsfinge');

btnEsfinge.on ('click tap', function (event) {
    event.stopPropagation ();
    audioPlaying var = createjs.Sound.play (audio1);
    audioPlaying.on ('complete', function () {
    // This work once, a second Attempt fails
                    console.log ('Audio ended!');

    }, This);
});

}

$ (Document) .ready (function () { initAudios (); initAct1 ();

photo = $ ('# envDiv') html ().;

// Button to reinit application

$ ('# BtnReinitApp'). On ('click tap', function () {
    $ ('# EnvDiv') html ('') html (photo)..;

    // InitAudios ();
    initAct1 ();

})

});

// HTML

<! DOCTYPE html>

SoundJs </ Title> <Script src = "js / jquery-2.1.4.min.js"> </ script> <Script src = "js / soundjs-0.6.1.min.js"> </ script> <Script src = "js / scripts.js"> </ script> </ Head> <Body> <Div id = "envDiv"> <Button id = "btnEsfinge"> btnEsfinge </ Button> </ Div> <Button id = "btnReinitApp"> btnReinitApp </ Button> </ Body> </ Html> I have done tests and by the time calling function "initAudios ()" every time I restart my application is enough and satisfactory for me. Anyway thanks for your kind attention. </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/omishe"><img src="https://avatars.githubusercontent.com/u/1811354?v=4" />omishe</a> commented <strong> 8 years ago</strong> </div> <div class="markdown-body"> <p>I send you the files, just change the terminations.</p> <p><a href="https://github.com/CreateJS/SoundJS/files/40509/soundjs.txt">soundjs.txt</a></p> <p><a href="https://github.com/CreateJS/SoundJS/files/40515/jquery-2.1.4.min.txt">jquery-2.1.4.min.txt</a> <a href="https://github.com/CreateJS/SoundJS/files/40516/soundjs-0.6.1.min.txt">soundjs-0.6.1.min.txt</a></p> <p>Thanks a lot!</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>