Mute Audio in Lightbox

Ask the community
,
1

Hi!

I’m using an audio button on my site: dawn-io .com

Unfortunately I have to use lightboxes in order to get the gallery displayed responsively so the audio button doesn’t appear on those lightboxes.

Is there a way in the code to mute audio when a user clicks on a linked video? Otherwise it will interfere with portfolio items. I checked event handlers but couldn’t make it work. Or is there a way to display the ‘Display on all pages’ element such as the audio button currently playing a track in a lightbox?

Thank you for your help.

2

You can simply setup two buttons or icons etc and set them to turn on or off the audioplayer.

https://www.wix.com/corvid/reference/$w.AudioPlayer.html
https://www.wix.com/corvid/reference/$w.AudioPlayer.html#mute
https://www.wix.com/corvid/reference/$w.AudioPlayer.html#unmute

Examples

Mute volume

$w("#myAudioPlayer").mute();

Mute volume and log a message when done

$w("#myAudioPlayer").mute()
  .then( () => {
    console.log("Done with mute");
  } );

Examples
Unmute volume

$w("#myAudioPlayer").unmute();

Unmute volume and log a message when done

$w("#myAudioPlayer").unmute()
  .then( () => {
    console.log("Done with unmute");
  } );

Simple example with Wix AudioPlayer added along with two buttons for the sound on and off.

$w.onReady(function () {
});

export function soundOff_click(event) {
$w("#audioPlayer1").mute()
}

export function soundOn_click(event) {
$w("#audioPlayer1").unmute();
 }
3

Fantastic! That also solved the issue of users getting confused by the play icon I can then change into a speaker icon.

4

The VideoPlayer is exactly the same setup, just switch AudioPlayer element id for your own VideoPlayer element id in the code example.
https://www.wix.com/corvid/reference/$w.VideoPlayer.html
https://www.wix.com/corvid/reference/$w.VideoPlayer.html#mute
https://www.wix.com/corvid/reference/$w.VideoPlayer.html#unmute

$w.onReady(function () {
});

export function soundOff_click(event) {
$w("#videoPlayer1").mute()
}

export function soundOn_click(event) {
$w("#videoPlayer1").unmute();
 }
5

Another option is to simply mute the video when it is opened by using the onPlay() function.
https://www.wix.com/corvid/reference/$w.VideoPlayer.html#onPlay

$w.onReady(function () {
});

$w("#videoPlayer1").onPlay( (event) => {
$w("#videoPlayer1").mute()
});

export function soundOff_click(event) {
$w("#videoPlayer1").mute()
}

export function soundOn_click(event) {
$w("#videoPlayer1").unmute();
 }
6

I see. So the problem is that I use a gallery including the videos in a lightbox on top of the previous page where the audio player is. So the selector doesn’t let me point to it as it’s not available in the lightbox. Do I have to use the code on the SITE code? I can’t link to the gallery on there and I believe it wouldn’t find the exact video I want to target, right?

For the two icons you mentioned, is there a way to just use one icon? I tried using toggle play with an icon but again, it couldn’t target the audio player (shown on all pages).

7

And just to clarify on the video, I meant that the audio player (background audio of the whole site) should be muted/toggled off when a user clicks on a video within the gallery OR using an icon in the lightbox which is where the gallery is displayed. The purpose is to pause audio when a video is watched / pause audio on a lightbox where it’s normally not possible to use an audio player. Unfortunately I have to use the lightbox in order to get the gallery responsive, on a normal page I keep having overlapping issues so I’m using a lightbox to avoid that.