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.
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();
}
Fantastic! That also solved the issue of users getting confused by the play icon I can then change into a speaker icon.
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();
}
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();
}
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).
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.