Dynamically Generate A Single Voice Track In Storyline
Choosing Your Voice ID
The ElevenLabs platform comes with a range of pre-made voice sounds that you can choose from for your dynamically generated voice track. It is important to note that note all voices that can be found working on the ElevenLabs web platform are available through the API. Most of the API pre-made voices to select from can be found here – https://elevenlabs.io/docs/voicelab/pre-made-voices
This list may change and evolve over time. If you want to get a more comprehensive list of the exact total voice IDs available to work with through the API platform then it is recommended to query this via the Get Voices API command (refer to the ElevenLabs documentation for further details on how to use this, this is not supported by the eLearning Magic Toolkit – https://elevenlabs.io/docs/api-reference/get-voices)
Once you have selected your voice ID, which should be a random string of approximately 20 characters, you are ready to set up your Execute JavaScript trigger in Storyline to request an audio track be generated and played.
Example JavaScript For Generating And Immediately Playing An Audio Clip Generated By ElevenLabs API
var script = getVar("MYTEXT");
var messages = []
// Choose Similarity Boost and Stability setting from 0 to 1.
var similarityBoost = 0.5;
var stability = 0.5;
var sendData = {
'nonce': parent.storylineMagicNonce,
'api': 'textToSpeech',
'modelId': 'eleven_multilingual_v2',
'text': script,
'id': 'bVMeCyTHy58xNoL34h3p' //Selected from elevenLabs.io
'similarity_boost': similarityBoost,
'stability': stability
};
sendData = JSON.stringify(sendData);
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("X-WP-Nonce", parent.storylineMagicRestNonce);
async function elevenlabs_req() {
try {
console.log('Sending Request To ElevenLabs...');
const response = await fetch(parent.storylineMagicEndpointElevenLabs, {
method:'POST',
headers: myHeaders,
body: sendData
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
} else {
console.log('ElevenLabs Response Returned.');
const data = await response.json();
const base64Audio = data.audio;
const audioBytes = atob(base64Audio);
const audioArray = new Uint8Array(audioBytes.length);
for (let i = 0; i < audioBytes.length; i++) {
audioArray[i] = audioBytes.charCodeAt(i);
}
const audioBlob = new Blob([audioArray], { type: 'audio/mpeg' });
const audiodataUrl = URL.createObjectURL(audioBlob);
// Store audio data URL for use by Storyline later
setVar("ElevenLabsAudioURL", audiodataUrl);
// Create a new audio object and set its source to the Object URL
const audio = new Audio(audiodataUrl);
// Play the audio
console.log("Audio is playing");
audio.play();
}
} catch (error) {
console.error('An error occurred:', error);
}
}
elevenlabs_req();
In the example above, we demonstrate how to retrieve a text variable from Storyline (labelled MYTEXT) for conversion into speech via ElevenLabs. This script variable can contain any text content you wish, such as coming directly from the Storyline activity itself, allowing you to modify the specified line to tailor the text that will be vocalised by the AI-powered voice.
You have the option to customise the voice ID and even select a different model for speech generation within the sendData configuration parameters. For optimal performance, we recommend employing the eleven_multilingual_v2 model as the most advanced option currently available.
The try…catch block is designed to handle the audio data returned by the API. This section deals with the processing of raw binary data for an audio/mpeg file, enabling direct playback in a web browser through an HTML audio element.
Towards the end of this code segment, the audio is generated and played instantaneously within the script. Additionally, the generated audio data is relayed back to Storyline, where it is stored in a Text Variable. This feature offers the flexibility to replay the audio within the same slide, for instance, by activating other JavaScript triggers, such as when a user clicks a button on the slide.
This functionality enhances the audio generation process, permitting not only the storage and repeated playback of a single audio file but also the creation and concurrent playback of multiple audio tracks. This capability facilitates the production of comprehensive conversations.
Further exploration of these advanced features will be discussed in subsequent sections of our knowledge base on this topic.
Read the rest of our Knowledge Base pages to make the most of eLearning Magic Toolkit.
