Embedding a Player

You can easily embed the Mix That Player in any website using our open source Mix That Player web component, built on stemplayer-js. This approach ensures seamless integration and full control over styling, without the limitations of an iframe.

Why Web Components Instead of Iframes?#

Embedding the Mix That Player as a web component offers several advantages over traditional iframes:

• Seamless Integration: Web components allow the player to blend naturally with your site’s layout and design, without the visual and functional limitations of an iframe.
• Full Customization: You can style the player using CSS variables and adapt it to your branding, which is not possible with iframe-embedded content.
• Better Performance: Web components are lighter and more efficient, reducing load times and resource usage compared to iframes.
• Improved Accessibility: The player can interact directly with your site’s DOM, making it easier to ensure accessibility and responsive design.
• Enhanced Functionality: Web components can communicate with your site’s JavaScript, enabling advanced integrations and interactivity that iframes cannot provide.

This approach gives you greater control, flexibility, and a better user experience when embedding audio on your website.

How to Embed the Player#

1. Follow the steps in Sharing a Track to generate your embed code.
2. Copy the embed code and paste it into your website:

<!-- Add this just before the </head> tag -->
<script type="module" src="https://app.mixthat.co/packages/@firstcoders/mixthat-player/latest/index.js"></script>
<style>
  :root {
    --stemplayer-js-controls-background-color: #232323;
  }
</style>
<!-- Place this where you want the player to appear -->
<mixthat-player controls="loop progress" src="https://app.mixthat.co/api/v1/tracks/6RdiBV?auth_token=ABCD"></mixthat-player>

Using Package Managers (NPM / Yarn)#

Prefer not to use a CDN? Install the player via NPM:

npm i @firstcoders/mixthat-player

See the GitHub repository for advanced usage and integration details.

Customization#

You can fully customize the player using CSS variables to match your site’s color scheme and branding. For example, you can adjust colors, fonts, and other visual elements to ensure the player fits seamlessly into your website’s design.

The Mix That Player is open source and released under the MIT license, so you are free to further customize or extend its functionality to suit your needs. You can contribute to its development or adapt it for your own projects.

For more configuration and styling options, refer to the stemplayer-js documentation.

Browser Support#

The Mix That Player works in any modern browser that supports the Web Audio API and Custom Elements (including recent versions of Chrome, Firefox, Safari, and Edge).

If you have questions or need help with embedding, feel free to contact support.