DEV Community

wimdenherder
wimdenherder

Posted on

How to fetch and play a mp3 from play.ht AI voices with the web Fetch API

Yes, it's possible to get and play the mp3 of the AI voices of play.ht! Just in your browser, just client-side. You can open up developer console and copy paste the code.

You have to replace SECRETKEY and USERID below with your own ones. You log in and find them here: https://play.ht/app/api-access
or via menu: Accessibility -> Integrations -> API Access


async function speak(text) {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await (await fetch('https://play.ht/api/v1/convert', {
        method: 'POST',
        headers: {
          'Authorization': 'SECRETKEY',
          'X-User-ID': 'USERID',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "voice": "en-US-MichelleNeural",
          "content": text.split(/\.|\?|!/),
          "title": "Testing Italian api convertion"
        })
      })).json();
      const mp3Url = `
      https://media.play.ht/full_${response.transcriptionId}.mp3`;
      console.log(mp3Url);
      while(true) {
        console.log(`trying again...`);
        if((await fetch(mp3Url)).status === 200) {
          snd = new Audio(mp3Url);
          snd.play();
          snd.onended = resolve;
          break;
        }
      }
    } catch (err) {
      reject(err);
    }
  });
}
Enter fullscreen mode Exit fullscreen mode

Finding the right mp3 url

I discovered the mp3 URL "https://media.play.ht/full_${response.transcriptionId}.mp3" by logging into the play.ht website, navigating to the 'files' section in the menu on the left, and playing the audio fragments. This URL was not included in the play.ht documentation. I also noted that the URL provided in the documentation for fetching the mp3 file, "./articleStatus?transcriptionId={transcriptionId}", did not work and returned a "Forbidden" error.

A loop until the mp3 is available

The mp3 is not immediately available, so I made a while-loop to try again and again!

Promise

The function is a promise, so that you can also await it. This can be useful in applications, so that you know when the text has been spoken

Voice

You can change the voice from a list here. In the script above just replace en-US-MichelleNeural with the voice name.

Top comments (4)

Collapse
 
chika_dillibe_ef611019189 profile image
CHIKA DILLIBE

Hello I am unable to see any of my audio files on Play.HT. HEEELP

Collapse
 
chika_dillibe_ef611019189 profile image
CHIKA DILLIBE

this is so new to me. I have generated secret key & user id. where ddo i go to use the above code ??

Collapse
 
chika_dillibe_ef611019189 profile image
CHIKA DILLIBE

this is so new to me. I have generated secret key & user id. where ddo i go to use the above code ??

Collapse
 
chika_dillibe_ef611019189 profile image
CHIKA DILLIBE

this is so new to me. I have generated secret key & user id. where do i go to use the above code??