Home Adding Audio with JavaScript: FireFox and Chrome show they're playing, but I'm not receiving any sound
Reply: 0

Adding Audio with JavaScript: FireFox and Chrome show they're playing, but I'm not receiving any sound

user2924 Published in July 17, 2018, 7:59 am

My peer and I have a series of JavaScript objects which all have an audio property. The value of that property is a string which provides the relative path to where that audio file is stored on our server.

I wrote a JavaScript function which references those objects and plays their audio files when a new object loads. Everything seemed to be working fine during testing. He just added new audio files today and messaged me that our project wasn't playing audio in IE -- but it still worked in FF and Chrome.

When I checked the error, I noticed IE was getting an invalid state error from the playAudio JavaScript function that I wrote. I made the assumption the mp3 file didn't fully load, so IE was throwing the invalid state error because it couldn't execute the play() command on a file that wasn't available yet. So, tonight I added a media event listener to ensure the function didn't execute until the mp3 resource was available.

That fixed the IE issue, but now both Chrome and FireFox aren't playing sound. And by that I mean, they are receiving the mp3 resource, no errors are being thrown to the console, and they both show the audio icon on the browser's tab above the url bar as though media content were actually playing. It seems like they are playing, but I'm not getting sound through my actual speakers. I'm kind of at a loss as to why this is happening, and will have to look into it more tomorrow -- but I'm hoping someone here might know what could be the cause.

// The playAudio function pulls the audio file from the scenes object and only plays once.
// Afterward, the scenes object receives a new parameter, audio_played, which is set to true.
function playAudio(id) {

    // check whether the variable currAudio has been defined.
    // If it has, pause currAudio.
    if (typeof currAudio !== 'undefined') {

    // check that the scenes object has an audio parameter
    // and that the audio_played parameter is not true
    if (scenes[id].audio && scenes[id].audio_played !== true) {

        // create a new Audio object using the loaded scene's audio
        // parameter and store it in the variable newAudio
        var newAudio = new Audio(scenes[id].audio);

        // wait for the audio file to load enough data
        // to be played, then execute the nested scripts.
        newAudio.addEventListener('canplay', function() {

            // set newAudio to start at the beginning of the file.
            newAudio.currentTime = 0;

            // play the audio file

            // add an audio_played parameter to the
            // scenes object and set it's value to true. 
            scenes[id].audio_played = true;

            // update the currAudio variable
            var currAudio = newAudio;

        }, false);
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.377183 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO