How to build an audio integration
This playbook offers guidance for implementing an audio integration. As Arc XP does not offer an inherent option for audio storage, you must depend on third-party services for all audio file management.
The methods in this document account for a raw HTML embed integration and custom Power Ups within Composer, aiming to optimize search engine visibility, user interface control, and overall user experience.
Audience
Designed for digital content managers, editors, and developers using Arc XP, particularly those who manage or plan to implement audio integrations such as music and podcasts.
Prerequisites
Proficiency with Arc XP's interface and basic functionality, including Composer, content sources, custom blocks, custom embeds, tags, IFX, and PageBuilder Editor. Use the following list of resources to familiarize yourself:
Required permissions for accessing and modifying features within Arc XP.
Summary
This guide provides two options for embedding audio files into Arc XP: using raw HTML or a custom Power Up solution. The raw HTML method involves uploading audio to a third-party system, like SoundCloud or Spotify, and embedding it in Arc XP using an iframe, allowing easy integration without development time. The custom Power Up solution involves uploading audio to a third-party system or a chosen database and using a custom Power Up for integration within Arc XP, providing full control over visuals and centralized management in Composer. Each method has its unique approach and requirements, catering to different needs and preferences for embedding audio content.
Workflow
Raw HTML
Using the raw HTML solution lets you upload audio content in a third-party external system (such as SoundCloud, Spotify, Mixcloud or others) and import that content into Arc XP through a raw HTML embed, such as an iframe.
Pros | Cons |
|---|---|
• Easy integration - no development time needed. • Choice of system - maintain legacy system or choose new third-party provider. | • Adding another tool to the editorial workflow, maintaining content outside of Arc XP • Creating and maintaining a relationship with a third-party provider or legacy system • Impact on performance due to client-side fetching of third-party data • Little influence on visuals and display |
Example HTML embed using Spotify
Here’s how you can use Spotify to embed audio in your CMS:
Find the audio on Spotify:
Navigate to the track, album, or playlist you want or upload on Spotify.
Get the embed code:
Click Share and select Embed.
Copy the provided iframe embed code.
Insert the code into an HTML embed in Composer:
In Composer, insert an HTML block into your story.
Paste the iframe code into HTML block where you want the audio to appear.
Here’s an example of what the Spotify embed code might look like:
<iframe src="https://open.spotify.com/embed/track/your-track-id" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Custom Power Ups in Composer around audio-hosting API
Designing a custom Power Up solution allows you to search and add content in a Composer story entirely in Arc XP’s system. You upload audio content in a third-party external system (such as SoundCloud, Spotify, Mixcloud, Bytescale, SourceAudio, or others) or use a database of your choice to host the audio files.
You can then implement the integration through a Power Up as explained in Getting Started with the Custom Embed Power Up in Composerand the Arc XP University course on Power Ups.
The most important task is how you expose the audio content to your end user. As this solution requires a custom Power Up, you must provide custom code to handle the data in the front-end code.
Pros | Cons |
• Content available to crawlers • You are in charge of visuals and display • Editors have everything in one place (Composer) | • You must build the custom Power Up • Custom development for visuals and display • Complex development work needed to upload Audio through the Power Up |
Themes versus non-Themes
Themes clients must fork and customize the Article Body Chain to add render the front-end code as explained in Getting Started with the Custom Embed Power Up in Composer, and the Arc XP University course on Power Ups.
Limitations
Non-indexed audio content:
Arc XP does not index audio content embedded from third-party services due to its external hosting as iframes or in a Power Up. This restricts the direct search of articles with certain audio content.
Uploading audio directly from Power Up:
Power Ups are not inherently secure as they are based on iframes. Creating a secure iframe to add this functionality would require complex development work.