Audio player stuck

Ask the community
,
1

I cannot find a way to make an audioplayer element play again reliably after another audioplayer has been played. It seems they remember they were previously played and are stuck in a kind of pause state. In any case, when you have played the next audioplayer and go back to the previous one again it often does not start on click. Is there a way to reset an audioplayer element after it has played so that it will be like new?

I’ve tried “.stop()” to reset things, but it’s not reliable. (Take for example the second audioplayer element in the linked example below.)

I’m trying to create spelling/speaking exercises for my language students and this would really help me out.

Please see my example: (url needs to be mended because I cannot include links)
https://www.lingologico .com/audio-player-issues

Here is my code:

export function image1_click ( event ) { $w ( ‘#audioPlayer1’ ). play ()}

export function image2_click ( event ) { $w ( ‘#audioPlayer2’ ). play ()}

export function image3_click ( event ) { $w ( ‘#audioPlayer3’ ). play ()}

export function button1_click ( event ) { $w ( ‘#audioPlayer1’ ). stop (); $w ( ‘#audioPlayer2’ ). stop (); $w ( ‘#audioPlayer3’ ). stop ()}

2

I checked to see if someone was having this same issue, and found your post. I have exactly the same issue and, as it happens, I’m building a language learning website!

3

I made a technical support request about a year ago. The technician kindly took note of the problem and gave me a ticket. I’ve never heard anything since. Have you found a solution?

4

Unfortunately no. I simply have learned to click the play image twice in rapid succession. Not very satisfactory.

5

Created this work around after many different attempts. Have no idea how it works, but it does.

$w . onReady ( function () {

$w ( “#IM01” ). onClick ( ( event ) => { $w ( “#AUD01” ). seek ( 0 ); setTimeout ( function (){ $w ( “#AUD02” ). seek ( 0 )}, 1 ); setTimeout ( function (){ $w ( “#AUD03” ). seek ( 0 )}, 1 ); setTimeout ( function (){ $w ( “#AUD01” ). play ()}, 1 )})

$w ( “#IM02” ). onClick ( ( event ) => { $w ( “#AUD02” ). seek ( 0 ); setTimeout ( function (){ $w ( “#AUD01” ). seek ( 0 )}, 1 ); setTimeout ( function (){ $w ( “#AUD03” ). seek ( 0 )}, 1 ); setTimeout ( function (){ $w ( “#AUD02” ). play ()}, 1 )})

$w ( “#IM03” ). onClick ( ( event ) => { $w ( “#AUD03” ). seek ( 0 ); setTimeout ( function (){ $w ( “#AUD02” ). seek ( 0 )}, 1 ); setTimeout ( function (){ $w ( “#AUD01” ). seek ( 0 )}, 1 ); setTimeout ( function (){ $w ( “#AUD03” ). play ()}, 1 )})
// Write your Javascript code here using the Velo framework API

// Print hello world: 
// console.log("Hello world!"); 

// Call functions on page elements, e.g.: 
// $w("#button1").label = "Click me!"; 

// Click "Run", or Preview your site, to execute your code

});