WebView Integration
Since the player at its core, is native JavaScript, HTML and CSS, the integration in a WebView environment is almost seamless.
Android
On Android, we recommend using the function loadDataWithBaseURL
Setting up variables
First off, let's define the variables we need for the integration. Make sure to replace with your values.
val url: String = "https://dailyup.etxstudio.com/articles/rn/fr/news_1g4vNPJ0/transport/en-balade-a-velo-cet-ete-le-long-du-danube",
val data: String =
"""
$LINK_CANONICAL
$SCRIPT_MODULE
$DIV_VOXA_PLAYER
$STYLE
"""
val LINK_CANONICAL = "<link rel="canonical" href='https://dailyup.etxstudio.com/articles/rn/fr/news_1g4vNPJ0/transport/en-balade-a-velo-cet-ete-le-long-du-danube' />"
val SCRIPT_MODULE =
"""
<script type='module'>
import { initETXPlayer } from 'https://player.voxa.majelan.com/voxa-player.js';
const config = {
audioUrl: 'https://files-api.dev.voxa.majelan.audio/name_1/account_1/deliver/2024/03/12/9q4uHDNP0S.mp3',
resourceId: 'p-Ud0Ukn_f', // Replace with the id returned by the API
contentTier: 'free', // Replace with metered or premium for paywalled content
};
initETXPlayer(config)
</script>
"""
val DIV_VOXA_PLAYER = "<div id="voxa-player"></div>"
val STYLE =
"""
<style>
:root {
--etx-primary-color: #ba1525;
--etx-section-button-play-padding: 0 0.5rem 0 0;
--etx-button-play-padding: 0.5rem;
--etx-button-play-border-radius: 0.25rem;
--etx-section-duration-padding: 0 0 0 1rem;
}
</style>
"""kotlin
Creating the WebView
Instanciate a WebViewClient and set up the necessary settings for it :
webView.settings.javaScriptEnabled = true
webView.settings.databaseEnabled = true
webView.settings.domStorageEnabled = truekt
loadDataWithBaseURL
Final step, call loadDataWithBaseURL with the variables we set up
webView.loadDataWithBaseURL(url, data, "text/html", "UTF-8", null)kt
And that's it! The VOXA player is now running as a WebView inside your Android app!