Get a professional website for $99 per month. One week turnaround.

Dynamic Music Player Tutorial (Elementor Pro & JetEngine)

Home Elementor Dynamic Music Player Tutorial (Elementor Pro & JetEngine)

April 11, 2024

In this Elementor Pro & JetEngine tutorial I will show you how to create a dynamic music player.

Get Elementor Pro:

Get JetEngine:

HappyFiles Plugin:


  • 0:00 Introduction
  • 1:08 Upload MP3s
  • 2:19 Enable JetEngine Dynamic Visibility
  • 2:45 Music Player Layout
  • 4:08 JavaScript & HTML Code Explained
  • 6:45 Dynamic Visibility & Request Parameter


					<select id="songSelector" onchange="selectSong()">
    <option value="">Select a Song</option>
    <option value="1">Rainy Day Reverie</option>
    <option value="2">Cozy Corner Melodies</option>
    <option value="3">Hazy Afternoon Serenade</option>
    <option value="4">Chill Cafe Atmosphere</option>
    <option value="5">Mellow Evening Glow</option>

<audio id="audioPlayer" controls autoplay>
    <source id="audioSource" src="" type="audio/mpeg">
    Your browser does not support the audio element.

JavaScript Code

   document.addEventListener('DOMContentLoaded', function() {
    const audioPlayer = document.getElementById('audioPlayer');
    const audioSource = document.getElementById('audioSource');
    const songSelector = document.getElementById('songSelector');
    const queryString =;
    const urlParams = new URLSearchParams(queryString);
    const selectedSong = urlParams.get('song');

    // Set the dropdown to the selected song if it exists
    if (selectedSong !== null && songSelector.querySelector(`option[value="${selectedSong}"]`)) {
        audioSource.src = `${selectedSong}.mp3`;
        songSelector.value = selectedSong;
    } else {
        // If the 'song' parameter doesn't exist or doesn't match any option, select the first option
        songSelector.value = '';

function selectSong() {
    const selectedSong = document.getElementById('songSelector').value;
    if (selectedSong) {
        // Change the current page URL with the selected song parameter = `?song=${selectedSong}`;

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources