Play / Pause Audio

Hi, I have an app where I want to play, pause, and stop an audio file from playing. I only want 1 file to play at a time so I want to only have 1 “audio player”. I cant seem to get this to work:

I have it setup to execute this code when the audio file I want played it selected:
// Create a new audio element
const audioElement = new Audio();

// Set the source of the audio element to the audio url
audioElement.src = context.item.data?.[‘audio’]?.[‘url’];

Then, when my Play Icon is pressed I execute this:
function playAudio() {
audioElement.play();
return ‘Audio played successfully.’;
}

Then when I hit the pause Icon I Execute:
function pauseAudio() {
audioElement.pause();
return ‘Audio paused successfully.’;
}

Any help would be greatly appreciated. I think this would be a whole lot simpler if WeWeb had an audio player element though.

Hi, the issue is you are declaring the audioElement locally, in your first customjs action, but audioElement will not be available in the others customjs actions.

What you can do is register your variable in wwLib, please register it under a custom variable name you’re sure we will not override.

wwLib.myUniqueProjectNameAudio = new Audio()

Then you will be able to access it from anywhere.

is there something where I can check all the methods of the wwLib?

Not yet, but hopfully this fall we will be able to rework our developer documentation and/or merge it inside the user doc with every public methods from wwLib explained :slight_smile:

I understand. I actually found a workaround which was to create a modal that looks and acts like an audio player, then use variables and component actions to add the functionality and have the video player do the work, only I have the video set to display: none; It seems to work pretty well.

2 Likes