SoundCloud + Magnolia CMS

How to use Magnolia and SoundCloud together

What SoundCloud offers

SoundCloud offers several embedding solutions that allow users to integrate audio content directly into their websites or applications seamlessly. One primary option is the SoundCloud Embed Player, which enables users to embed tracks, playlists, or albums onto web pages with a simple embed code. This player provides a customizable interface, allowing users to control aspects such as the player size, color scheme, and playback options.

Additionally, SoundCloud offers a JavaScript API that provides developers with more advanced embedding capabilities. With this API, developers can create custom audio players with tailored functionality, including features like play, pause, skip, volume control, and track information display. The JavaScript API also enables integration with other web elements and services, allowing for a more immersive and interactive audio experience.

Furthermore, SoundCloud provides oEmbed support, allowing users to easily embed SoundCloud content by simply pasting the URL of a track, playlist, or user profile into their website or application. This method simplifies the embedding process and ensures compatibility with various platforms and content management systems.

Overall, SoundCloud offers flexible embedding solutions catering to different levels of customization and integration requirements, making it easy for users and developers to incorporate audio content from SoundCloud into their online platforms effectively.

Easy peasy, out of the box

Embed with iFrame

The easiest way to add a SoundCloud to your website is by adding the iFrame embed code to a HTML Component. If you don't have an HTML component available, please ask your implementation administrator. They probably removed permissions.






Code your own custom component

Embed code through custom component

Another option that provides a bit more security is the use of a custom component for SoundCloud integrations. In this case, you create a custom component that uses an ID from your platform. This ID selects the specific embed markup. This is particularly useful if you choose to use a custom sound player instead of the standard embed code. It is also helpful if you want to integrate privacy solutions before enabling iframes to 3rd-party vendors like SoundCloud.