How to Display the Playlist Name on Your AzuraCast Public Page

If you’re using AzuraCast for your online radio station, you might want to provide more information on your public page, like the current playlist name. This can enhance the listener experience by showing them exactly what content is playing. In this post, I’ll walk you through how to dynamically display the playlist name using custom JavaScript and a public API.

Step 1: Understanding the API Endpoint

AzuraCast provides a customizable interface and allows you to include custom JavaScript on your public pages. We’ll use the following API endpoint to fetch the current playlist information:

• API Endpoint: https://YOURURL/api/nowplaying_static/YOURSTATION.json

This endpoint provides a JSON response containing the playlist name and other details about the currently playing track – you will need to make sure to update this with the URL you are using and your station name.

Step 2: Writing the Custom JavaScript

To fetch the playlist name and display it on your public page, we’ll write a simple JavaScript function. This script will call the API, parse the response, and update the HTML to show the current playlist. Dont forget to replace the items in bold with your own values

Here’s the JavaScript code you’ll need:

document.addEventListener("DOMContentLoaded", function() {
    // API endpoint to fetch playlist data
    const apiURL = "https://YOURURL.COM/api/nowplaying_static/YOUR_STATION_NAME.json";
    
    // Function to fetch and update playlist name
    function updatePlaylistName() {
        fetch(apiURL)
            .then(response => response.json())
            .then(data => {
                // Get the playlist name from the JSON response
                const playlistName = data.now_playing.playlist;

                // Find the target element on the public page
                const titleElement = document.querySelector('h2.card-title.mb-3');

                // Update the content with the playlist name
                if (titleElement && playlistName) {
                    titleElement.textContent = `YOUR STATION NAME - ${playlistName}`;
                }
            })
            .catch(error => console.error('Error fetching playlist data:', error));
    }

    // Initial call to update the playlist name when the page loads
    updatePlaylistName();

    // Set an interval to update the playlist name every 60 seconds (60000 milliseconds)
    setInterval(updatePlaylistName, 60000); // Adjust the interval time as needed
});

Step 3: Adding the JavaScript to Your AzuraCast Public Page

1. Log in to AzuraCast: Navigate to your AzuraCast dashboard.
2. Go to Custom Branding: Under Manage your station, Find Profile> Branding > Custom Public Page JS.
3. Paste the JavaScript Code: Copy the JavaScript code provided above and paste it into the “Custom Public Page JS” field.
4. Save Your Changes: Click the “Save” button to apply the changes.

Step 4: Modifying the HTML

Ensure that your AzuraCast public page has an element like this:

htmlCopy code<h2 class="card-title mb-3">YOUR STATION NAME</h2>

This is where the playlist name will be dynamically injected. The JavaScript code targets this element using its class name, so no additional changes are needed to the HTML structure.

Step 5: Test Your Changes

After saving the custom JavaScript, visit your AzuraCast public page to verify that the playlist name is displayed correctly. You should see the <h2> element update with both the station name (“Radio Nova”) and the current playlist name.

For example, if the playlist name is “Top Hits,” it will display:

htmlCopy code<h2 class="card-title mb-3">YOUR STATION NAME - Top Hits</h2>

On my station it looks like this:

Bonus Tips

• Error Handling: If the playlist name does not display correctly, check your browser’s console for any errors.
• Customization: You can modify the JavaScript to change the text format or style according to your website’s design.
• Refreshing Data: To update the playlist name in real-time, consider changing the timer to a frequency that matches your playlist rotation.

Conclusion

By following these steps, you can enhance your AzuraCast public page with dynamic playlist information, making your station more engaging for listeners. The process is simple, thanks to AzuraCast’s flexibility and the power of JavaScript.

If you have any questions or run into any issues, feel free to leave a comment below!