JSFiddle - React, Tailwind, and code Playground

by andreas_hagsten

HTML

<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/styles/talkify-playlist.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/styles/talkify-common.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/styles/talkify-audiocontrols.css">
<script src="https://rawgit.com/Hagsten/Talkify/master/dist/talkify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css">

<p>
  Not playing
</p>

CSS

.talkify-audio-control {
  color: white;
}

.fa-2x {
  font-size: 20px !important;
}

JavaScript

talkify.config.remoteService.host = 'https://talkify.net';
talkify.config.remoteService.apiKey = '46b32f4e-6b73-40ee-8ae1-4a17cb1b18f6';

talkify.config.ui.audioControls = {
  enabled: false //<-- Disable to get the browser built in audio controls
};

talkify.config.debug = true;

$(document).ready(function() {
  var textContainer = $('p');
  
  talkify.messageHub.subscribe("fiddle", "*.player.tts.play", function(){
  	textContainer.text("playing...");
  });
  
  talkify.messageHub.subscribe("fiddle", "*.player.tts.ended", function(){
  	textContainer.text("Not playing...");
  });
  
  var player = new talkify.TtsPlayer();

	player.playText("Testing, testing");
  
  
});