Enhancing Your Power BI Reports with Sound Effects: A Step-by-Step Guide

Posted on Categories Fun, Power BI

Chris’s note: You’ll need to use one of the HTMLViewer custom visuals that requires an additional cost from what I can discern to have this work successfully.

Introduction

Visual representations are an essential aspect of data analysis, but why not take it a step further and add sound effects to your Power BI reports? Sounds can enhance the user experience and make your reports even more engaging. In this blog post, we will walk you through a step-by-step guide on how to add sound effects to your Power BI reports.

Prerequisites

Before we dive in, make sure you have the following:

  1. A Power BI Pro or Premium account
  2. Power BI Desktop installed on your computer
  3. Audio files in MP3, WAV, or OGG format that you want to use as sound effects
  4. Familiarity with creating basic Power BI reports

Adding Sound Effects to a Power BI Report: Step-by-Step Guide

Step 1: Create a new table for audio files

First, we need to create a new table that will hold the audio file names and their corresponding URLs. In the Power BI Desktop, go to the ‘Home’ tab, click on ‘Enter Data,’ and create a new table with two columns: ‘AudioName’ and ‘AudioURL’. In the ‘AudioName’ column, provide descriptive names for your audio files, and in the ‘AudioURL’ column, insert the web URL where your audio files are hosted. This is necessary because Power BI does not support local audio files.

Step 2: Create a custom column with a JSON definition

We will now create a custom column in the audio table that contains a JSON definition for the audio files. This JSON definition will be used later to trigger the audio playback using a custom visual.

  1. Click on the audio table you created earlier.
  2. In the ‘Modeling’ tab, click on ‘New Column.’
  3. In the formula bar, enter the following formula:
AudioJSON = "{\"url\":\"" & [AudioURL] & "\",\"name\":\"" & [AudioName] & "\"}"

This formula creates a JSON definition for each audio file in your table, which includes the file’s URL and name.

Step 3: Install the HTML Viewer custom visual

To play the audio files, we need to add the HTML Viewer custom visual to our report.

  1. In the Power BI Desktop, go to the ‘Home’ tab and click on ‘Import from AppSource.’
  2. Search for ‘HTML Viewer’ and install the custom visual by clicking on ‘Add.’

Step 4: Add the HTML Viewer custom visual to your report

Now that the HTML Viewer custom visual is installed, we will add it to our report.

  1. In the ‘Visualizations’ pane, click on the ‘HTML Viewer’ icon.
  2. Drag and drop the ‘AudioJSON’ column from your audio table to the ‘HTML Content’ field in the ‘Fields’ pane of the HTML Viewer.

Step 5: Create an audio player using HTML and JavaScript

The HTML Viewer custom visual allows us to display custom HTML content, so we will use it to create an audio player.

  1. Click on the ‘HTML Viewer’ visual that you added to your report.
  2. In the ‘Visualizations’ pane, go to the ‘Format’ tab.
  3. Click on ‘Edit’ next to ‘HTML Content.’
  4. Enter the following HTML and JavaScript code in the ‘HTML Content’ field:
<!DOCTYPE html>
<html>
<head>
<style>
audio {
  display: none;
}
</style>
<script>
function playAudio(url) {
  var audio = new Audio(url);
  audio.play();
}
</script>
</head>
<body>
<audio id="audioPlayer"></audio>
<script>
var audioData = JSON.parse('{{AudioJSON}}');
var audioPlayer = document.getElementById('audioPlayer');
audioPlayer.src = audioData.url;
playAudio(audioData.url);
</script>
</body>
</html>

This code creates a hidden audio player and plays the audio file based on the JSON definition provided in the ‘AudioJSON’ column.

Step 6: Add a slicer to select sound effects

To enable users to choose the sound effect they want to play, add a slicer visual to your report.

  1. In the ‘Visualizations’ pane, click on the ‘Slicer’ icon.
  2. Drag and drop the ‘AudioName’ column from your audio table to the ‘Field’ area in the ‘Fields’ pane of the slicer.

Now, when users click on a sound effect in the slicer, the corresponding audio file will play using the HTML Viewer custom visual.

Conclusion

In this blog post, we showed you how to add sound effects to your Power BI reports using a combination of custom visuals and HTML/JavaScript. While this method is not supported natively by Power BI, it provides an engaging and interactive way to enhance your reports. With a little creativity, you can take your Power BI reports to the next level and create a truly immersive experience for your users.

This blogpost was created with help from ChatGPT Pro.

2 thoughts on “Enhancing Your Power BI Reports with Sound Effects: A Step-by-Step Guide”

  1. Hey Christopher. This is VERY cool… but there doesn’t seem to be a “HTML Viewer” visual in AppSource. There are ones with very similar names… do you mean one of those?

    There used to be a HTML Viewer visual a couple years ago, but it was removed from AppSource for some reason.

    Like

Comments are closed.