JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/Hagsten/Talkify/master/dist/talkify.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/talkify-common.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/talkify-playlist.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/colors.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/modern-control-center/colors.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/modern-control-center/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/text-selection-activator/colors.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/text-selection-activator/main.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/local-control-center/main.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/dist/styles/local-control-center/colors.css">
<section id="root">
<h3>
Demo of our text selection feature
</h3>
<p>
Select some text and click the listen button
</p>
</section>
CSS
.talkify-audio-control {
color: white;
}
.fa-2x {
font-size: 20px !important;
}
.talkify-control-center.attached .audio-loading {
height: 16px;
width: 16px;
}
JavaScript
talkify.config.remoteService.host = 'https://talkify.net';
talkify.config.remoteService.apiKey = '46b32f4e-6b73-40ee-8ae1-4a17cb1b18f6';
talkify.config.ui.audioControls.enabled = true; //<-- Disable to get the browser built in audio controls
talkify.config.ui.audioControls.voicepicker.enabled = true;
talkify.config.ui.audioControls.container = document.getElementById("player-and-voices");
$(document).ready(function() {
talkify.selectionActivator
.withTextHighlighting()
.activate();
});