Welcome to the first post in my new series, “Can it be built in Power Platform?” Today, we’re diving into the world of music streaming to see if we can build a Spotify client inside a Power Apps canvas app. With the versatility and power of the Power Platform, the challenge is to create a functional Spotify client that can display songs and artists, control playback, and allow users to search for their favorite tunes. Let’s explore how we did it, the tools i used, and the hurdles i encountered.
Demo
Before we dive into the details, check out this demo video showcasing the Spotify client in action. You’ll see how the app displays songs and artists, controls playback, and allows for music searches. This visual walkthrough will give you a better understanding of the app’s functionality and design.
Building the Spotify Client
To create our Spotify client, i leveraged a combination of low-code tools available within the Power Platform and a custom connector to interact with the Spotify API. The complete app is build as a canvas app using meanly generic components, as there are: Text, image, icons, sliders, containers, … Here’s a breakdown of the key functionalities and components i built:
Display Songs and Artists: Using the Spotify API through a custom connector, we pulled data to display songs and artists within the app. This allowed users to browse their playlists and favorite tracks seamlessly.
Playback Control: One of the exciting features was the ability to start, stop, play, and skip songs on another device. Controlling the player can mostly be done trough the API. As for streaming songs to the apps, i was planning to use the Spotify Playback SDK using a PowerApps Component Framework (PCF) control.
Search Functionality: I also implemented a search function that lets users find songs or artists by typing in a query. The app fetches and displays the search results dynamically, making it easy to explore new music.
Designing a spotify like app
Inspired by the design concepts of the Spotify web app, we aimed to create a sleek, user-friendly interface. Using containers is the way to go when building complex apps, and it played a crucial role in structuring our Spotify client. Here’s a high-level overview of how we approached the layout:
Main Container: The main container served as the base for the entire app, ensuring a cohesive structure and containing all other nested containers.
Sidebar Container: On the left side, the sidebar container housed the playlist container, providing easy access to the user’s playlists.It also gives acces to favorites and search
Content Container: The central content container is dynamic and can display different types of content based on user selection: the playlist container, the favorites container, or the search results container.
Playback Control Container: At the bottom, the playback control container housed buttons for play, pause, skip, and other playback controls, providing easy access for users to control their music.
Devices Container/Currently playing: Positioned within easy reach, the devices container allowed users to switch the playback device, ensuring flexibility in their listening experience. The container is also used to show the currently playing song.
The PCF challenge
To actually stream songs from within the app i was hoping to use the Spotify Playback SDK. While the PCF control worked perfectly in the test harness, integrating it into the canvas app presented a significant challenge. I encountered a permissions policy violation error:
[Violation] Permissions policy violation: encrypted-media is not allowed in this document.
This error seems to be related to a limitation within Power Platform regarding the encrypted-media permissions policy. Despite my efforts, this issue remained unresolved, hindering the full functionality of the Spotify Playback SDK within the canvas app.
Conclusion and call for help
In conclusion, it is semi-possible to create a Spotify client using Power Apps. The app successfully displays songs and artists, allows playback control on another device, and includes search functionality. However, the encrypted-media permissions policy violation is a significant roadblock, preventing the complete integration of the Spotify Playback SDK.
I invite all readers and Power Platform enthusiasts to share their insights and potential solutions to this issue. Your expertise could help overcome this limitation and make the Spotify client fully functional within Power Apps.
So can it be build? Kind of, so it get’s 3 stars!
For those interested in exploring the solution in more detail, you can download both the unmanaged Spotify Client solution and the unmaged PCF solution here on github: