For example:
You want to show locations of the artist, currently running in your audio-player inside an iFrame or similar ???
You are using the Wix-Audio-Player or a → CUSTOM one ?
For example, can I create a custom box or widget that I can place in one location on my page/site, that displays only the title info from the audio player located elsewhere on the page, and automatically updates when the player changes songs?
Step-1: Getting the artist name/title of the current playing audio…
$w.onReady(()=>{
let isPlaying = $w("#myAudioPlayer").isPlaying;
if(isPlaying) {console.log('My audio-player is palying now....');
//add here the functions, if your player is currently playing a specific song....
//you wanted to get the title of the current playing song, right?......
let artist = $w("#myAudioPlayer").artistName; // "Artist name"
console.log('Currently playing title --> ' + artist);
}
else {console.log('My audio-player is not playing.');
//add here what to do when player is currently not playing....
}
});
Now you already are able to get the artist name of the current playing song.
But the problem is still that it will check check for the player only onLoad() of the page, or better said → when page is ready → onReady().
But since you do not have the chnace to start the video, before the page has been loaded (yes you could, but would not make any sense), this for you will need to optimize your code…
Step-2: code-optimization (integrating a click-button to start the player…
$w.onReady(()=>{
$w('#myButton1').onClick(()=>{
start_audioPlayback();
});
});
function start_audioPlayback() {
$w("#myAudioPlayer").play();
check_audioPlayer();
}
function check_audioPlayer() {
let isPlaying = $w("#myAudioPlayer").isPlaying;
if(isPlaying) {console.log('My audio-player is palying now....');
//add here the functions, if your player is currently playing a specific song....
//you wanted to get the title of the current playing song, right?......
let artist = $w("#myAudioPlayer").artistName; // "Artist name"
console.log('Currently playing title --> ' + artist);
}
else {console.log('My audio-player is not playing.');
//add here what to do when player is currently not playing....
}
}
Of course you also could use another approach —> using —> onPlay()
https://dev.wix.com/docs/velo/api-reference/$w/audio-player/on-play
- Now try to generate Step-3 and so on…
