Issues playing audio files – project works in Firefox but not Chrome

Tagged: audio, browser, chrome, Firefox

This topic has 6 replies, 2 voices, and was last updated 1 year, 11 months ago by aiveris.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
May 9, 2022 at 2:54 am #8160

aiveris
Participant

Hi All,

I’ve been struggling with setting up a task which involves playing two audio files per trial. An earlier version of the experiment played only one audio file per trial, and seemed to have no problems. I have been working in Chrome and sent it to someone else for advice – he opened it in Firefox and found no issues running the code. After opening it in Firefox, the code works for me as well!

Issues I noticed using Chrome:
–Initial preloading takes a very long time, and not all the files are preloaded no matter how long I wait, causing large pauses throughout the experiment. The preview opens almost instantly when Firefox is used, and has no pauses.
–In the very first trial, only one of the two sound files is audible.
–The known issues with changes not being saved seems to be much worse in Chrome.

Demo link showcasing the problem: https://farm.pcibex.net/r/xipjyd/
-Audio files are in .wav format.
–Audio_1 and Audio_2 are pulled from columns in the .csv file, sometimes they are the same and sometimes different, but there should be two instances per trial either way.

Is there any known workaround for this problem? I don’t mind working in Firefox myself, but I worry that restricting participants to using Firefox will reduce my sign-up rate or lead to non-compliance issues. Thank you in advance!

Best,
Aiden

May 9, 2022 at 5:46 pm #8163
Jeremy
Keymaster
Hi Aiden,

I’m sorry for not catching this problem: I use Firefox as my default browser, and even though I usually check that things also work on Chrome, I never tested playing back the same audio file within a single trial in two different Audio elements on Chrome. What happens is, browsers usually prevent webpages from automatically playing back audio/video files until the user has interacted with the page. Both Firefox and Chrome do that, which messes with the preloading of the audio files. For some reason, when that happens but Firefox still ultimately manages to preload an audio file, PennController notifies all Audio elements using the same audio file that it’s been preloaded. When the same thing happens on Chrome, however, only one of the two elements gets notified

I’ll work on fixing that in the next release of PennController. In the meantime, you can override the definition of the Audio element to make it wait for a click on (= interaction with) the page before preloading the audios. I tested this solution on Chrome and it seems to work well

The very first thing to do is insert an intro trial to make participants click on the page before they get to the first trial, so that the browser detects an interaction with the page and can safely start preloading the audio files. Something like:
```
Sequence("intro","trials_1.2")

newTrial("intro", newButton("Start").print().wait() )
```
Then, you need to download this file (use your browser’s Save function–make sure to keep the filename PennElement_audio.js). Upload this file to your project’s Modules folder: it will effectively override the Audio element defined in your project’s copy of PennController.js (which will give you an error in the debugger saying “Element type Audio defined more than once” when you run your experiment, but you can just ignore it)

Now, you’ll need to make some edits to that file. First, you should add this line at the very top: const hasClicked = new Promise(r=>document.addEventListener("mousedown", r));

Then, since you are using PennController 2.0, you should delete (or comment out) the block of lines starting with this.resource = PennEngine.resources.new(file, function(uri, resolve){ up to (the first occurrence of) }, addHostURLs);. Notice all the lines coming after that prefixed with //, starting with // this.resource = PennEngine.resources.fetch(file, function(resolve){: you need to uncomment them all (ie. delete // at the beginning) up to and including // }, addHostURLs);

Finally, replace this.resource = PennEngine.resources.fetch(file, function(resolve){ with this.resource = PennEngine.resources.fetch(file, async function(resolve){ and just after that line, and before this.object = new Audio(); // Creation of the audio using the resource's value, insert a line with just await hasClicked;

Once you’ve proceeded to those edits, the first lines of your copy of PennElement_audio.js should be:
```
const hasClicked = new Promise(r=>document.addEventListener("mousedown", r));

// AUDIO element
/* $AC$ PennController.newAudio(name,file) Creates a new Audio element $AC$ */
/* $AC$ PennController.getAudio(name) Retrieves an existing Audio element $AC$ */
window.PennController._AddElementType("Audio", function(PennEngine) {

    const RATIO_PRELOADED = 0.95;

    // This is executed when Ibex runs the script in data_includes (not a promise, no need to resolve)
    this.immediate = function(id, file){
        if (typeof id == "string" && file===undefined)
            file = id;
        let addHostURLs = !file.match(/^http/i);

        this.resource = PennEngine.resources.fetch(file, async function(resolve){
          await hasClicked;
          this.object = new Audio();               // Creation of the audio using the resource's value
```
Take your experiment in Chrome, and it should now preload fine

Let me know if you encounter issues or have any questions

Jeremy
May 10, 2022 at 7:04 pm #8172

aiveris
Participant

Hi Jeremy,

Thank you so much for your quick response and help!

I think I have implemented these changes properly, but it still does not execute the experiment smoothly in Chrome, and stalls frequently. There is one alert message in the editor for the PennElement_audio.js file that might be relevant, but I’m not sure what it means, it reads: ‘async functions’ is only available in ES8 (use eversion: 8).

In case this is stemming from additional problem in my larger experiment code and you happen to have time to check it out, here is the full experiment link: https://farm.pcibex.net/r/SZqFpC/ If not I’ll keep working on it, and update the thread if I figure it out!

Thanks again!
Aiden

May 11, 2022 at 12:08 am #8173

Jeremy
Keymaster

Huh, you’re right, I get the same issue on Chrome too. I don’t know why the change did the trick for the first demo link…

In any case, the first diagnostic stands: the problem essentially arises when you have two Audio elements that play the same file. You can easily work around that by replacing all the occurrences of newAudio("audio_2", row.Audio_2)) with (row.Audio_2==row.Audio_1?getAudio("audio_1"):newAudio("audio_2", row.Audio_2)) in your code

Also, I don’t get the “async” error in Chrome: what version of the browser are you using?

Jeremy

May 14, 2022 at 1:26 pm #8181
aiveris
Participant
Hi Jeremy,

Thanks for taking another look! The experiment seems to work fine for me now so I thought the issue had gone away, but most other people I’ve asked to try it report problems. Most people say the experiment freezes around the half-way point, although one person couldn’t get it past a handful of trials. I’ve noticed that the problems seems to prevent “trials_2.1 from running, regardless of whether I start at the beginning of the experiment, or I skip the first half of the experiment and start at “preload_examples_2.0”. If I start right on “preload_trials_2.1”, then the error occurs in “trials_2.2” instead.

I was using an outdated version of Chrome so I did update it to the most recent update, and I still see the same error in the PennElement_audio.js file. Here are the console error messages in both Firefox and Chrome in case that helps (sorry for the wall of text)!

In Firefox the error is:

Uncaught (in promise) DOMException: The media resource indicated by the src attribute or assigned media provider object was not suitable. PennElement_audio.js:177
play https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNmJNTEE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–41eb2bc617df89e1ef0d11b4298c39818323d0eb/PennElement_audio.js:177
o https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
u https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
AsyncFunctionNext self-hosted:638
(Async: async)
u https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
f/n[e]/< https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
i https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
AsyncFunctionNext self-hosted:638
(Async: async)
i https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
i https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
AsyncFunctionNext self-hosted:638
(Async: async)
i https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
d https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33
_init https://farm.pcibex.net/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeThoRFE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==–8fe275011ab723ccc5d9ce3c30d095bc689bd3d5/PennController.js:33

Here is the same error in Chrome:

PennElement_audio.js:177 Uncaught (in promise) DOMException: The element has no supported sources.
play @ PennElement_audio.js:177
(anonymous) @ PennController.js:33
(anonymous) @ PennController.js:33
await in (anonymous) (async)
(anonymous) @ PennController.js:33
(anonymous) @ PennController.js:33
(anonymous) @ PennController.js:33
await in (anonymous) (async)
(anonymous) @ PennController.js:33
(anonymous) @ PennController.js:33
await in (anonymous) (async)
(anonymous) @ PennController.js:33
d @ PennController.js:33
(anonymous) @ PennController.js:33

Sorry for the ongoing questions, and thanks for your patience!

Best,
Aiden
- This reply was modified 1 year, 11 months ago by aiveris.
May 16, 2022 at 11:10 am #8185

Jeremy
Keymaster

Hi Aiden,

I don’t see trials_2.1 or trials_2.2 in your experiment because it contains no tables named SS_Trials_2.1.csv or SS_Trials_2.2.csv

That being said, the error you report is consistent with some audio files being corrupt, or some lines in a table referencing an invalid filename

Jeremy

May 16, 2022 at 2:36 pm #8189
aiveris
Participant
Hi Jeremy,

Sorry for the confusion, I had taken those tables down at some point while troubleshooting. But I believe you are correct, I found a mis-named audio file! Thank you again!

Aiden
- This reply was modified 1 year, 11 months ago by aiveris.
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.