DEV Community: wimdenherder

Download YouTube subtitles with a few lines of code

wimdenherder — Sat, 06 Jan 2024 09:05:11 +0000

Paste the following in the javascript developer console while being on a YouTube video page. It will download the subtitles to a .txt file. You can change the language simply on the line on the bottom

async function getSubs(langCode = 'en') {
  let ct = JSON.parse((await (await fetch(window.location.href)).text()).split('ytInitialPlayerResponse = ')[1].split(';var')[0]).captions.playerCaptionsTracklistRenderer.captionTracks, findCaptionUrl = x => ct.find(y => y.vssId.indexOf(x) === 0)?.baseUrl, firstChoice = findCaptionUrl("." + langCode), url = firstChoice ? firstChoice + "&fmt=json3" : (findCaptionUrl(".") || findCaptionUrl("a." + langCode) || ct[0].baseUrl) + "&fmt=json3&tlang=" + langCode;
  return (await (await fetch(url)).json()).events.map(x => ({...x, text: x.segs?.map(x => x.utf8)?.join(" ")?.replace(/\n/g,' ')?.replace(/♪|'|"|\.{2,}|\<[\s\S]*?\>|\{[\s\S]*?\}|\[[\s\S]*?\]/g,'')?.trim() || ''}));
}
async function logSubs(langCode) {
  const subs = await getSubs(langCode);
  const text = subs.map(x => x.text).join('\n');
  console.log(text);
  return text;
}
async function downloadSubs(langCode) {
  const text = await logSubs(langCode);
  const blob = new Blob([text], {type: 'text/plain'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'subs.txt';
  a.click();
  URL.revokeObjectURL(url);
}

downloadSubs('en');

Retrieving the subtitles (getSubs function)

If you type await getSubs('de') in the console (assuming you pasted the code above), you will see an array with all subtitles in german! You can ask for any language, because the YouTube API just translates everything for you, cool he! We don't even have to translate it.

Let's break down the code into smaller parts to better understand each step:

Retrieve the caption tracks object (ct):

let ct = JSON.parse((await (await fetch(window.location.href)).text()).split('ytInitialPlayerResponse = ')[1].split(';var')[0]).captions.playerCaptionsTracklistRenderer.captionTracks;

If you are on a YouTube page in the dev console, type ytInitialPlayerResponse and big chance you'll find an object with lots of information (including subtitles, click "captions") about this video!
I decided to retrieve this variable directly from the video page's HTML and extract the ytInitialPlayerResponse from it. Why? Because, if you watch another video, the global variable ytInitialPlayerResponse does not get updated automatically. You cannot rely on it, you have to fetch the new video page and extract the object from it.

Define a helper function (findCaptionUrl):

let findCaptionUrl = x => ct.find(y => y.vssId.indexOf(x) === 0)?.baseUrl;

This helper function searches in the caption tracks and returns the base URL of the right caption track.
The vssId looks very similar to the languageCode as we will see in the following line.

Build the subtitles URL (url):

let firstChoice = findCaptionUrl("." + langCode);
let url = firstChoice ? firstChoice + "&fmt=json3" : (findCaptionUrl(".") || findCaptionUrl("a." + langCode) || ct[0].baseUrl) + "&fmt=json3&tlang=" + langCode;

In order of preference we would like to retrieve:

a written subtitle in our language (our firstChoice)
any written subtitle (that we translate to our language)
an automatic subtitle in our language
any subtitle (that we translate to our language)

Note that the URL also includes the format (json3) and translate language (tlang) query parameters. The Youtube API does this for us :-)

You can skip this detail: If we find an automatic subtitle in our language (3.), we will mute the voice-over in this case automatically, because the video is already in the preferred language. This happens by coincidence, because if you translate (tlang=) to its own language it returns blank subtitles :-)

Fetch and process the subtitles:

return (await (await fetch(url)).json()).events.map(x => ({...x, text: x.segs?.map(x => x.utf8)?.join(" ")?.replace(/
/g,' ')?.replace(/♪|'|"|.{2,}|<[sS]*?>|{[sS]*?}|[[sS]*?]/g,'')?.trim() || ''}));

This line

fetches the subtitles from the previously constructed URL
parses them as JSON
processes the events to extract the text of each subtitle.
It also cleans the text by removing unnecessary characters and formatting.

Let's break down the code into smaller parts to better understand each step:

Fetch the subtitles and convert them to JSON:

await (await fetch(url)).json()

This part of the line fetches the subtitles from the provided URL and converts the response into a JSON object.

Process the events:

.events.map(x => ...)

This part of the line maps over the events array of the JSON object to process each event.

Create a new object for each event:

({...x, text: ...})

For each event, a new object is created that includes all the original properties of the event (...x) and a new text property that will contain the cleaned subtitle text.

Extract and clean the subtitle text:

x.segs?.map(x => x.utf8)?.join(" ")?.replace(/
/g,' ')?.replace(/♪|'|"|.{2,}|<[sS]*?>|{[sS]*?}|[[sS]*?]/g,'')?.trim() || ''

This part of the line extracts the subtitle text from the event's segs property and performs the following operations:

Maps over the segs array and retrieves the utf8 property of each segment.
Joins the segments into a single string with spaces between them.
Replaces newline characters with spaces.
Removes special characters, quotes, multiple periods, and any content within angle brackets, curly braces, or square brackets.
Trims whitespace from the beginning and end of the string. PS: If any of these operations fail (e.g., because the segs property is undefined), an empty string is returned (|| '').

Youtube adblocker does not work? Solve it with 6 lines of code (December 2023)

wimdenherder — Wed, 13 Dec 2023 07:28:10 +0000

I used to have a chrome extension Adblock to block YouTube video's but somwhere november 2023 it stopped working. YouTube noticed its activity and blocked the full experience whatsoever.

So I tried to code it myself and it turned out to be just 6 lines of code that does the trick:

setInterval(async () => {
    if(!document.querySelector('.ad-showing')) return;
    document.querySelector('video').currentTime = 1000;
    await (async () => new Promise(r => setTimeout(r, 100)))();
    document.querySelector('.ytp-ad-skip-button-slot')?.click();
}, 300);

This is what it does

checks if an ad is displayed
skips advertisement to 1000 seconds
waits 0,1 sec
clicks skip button

Around this you will find the setInterval that executes the function every 0,3 sec

Create a Chrome Extension

This is the ChatGPT prompt:

Create a chrome extension that executes the following script on a youtube page. No pop up. No background script. Manifest version 3.
setInterval(async () => {
if(!document.querySelector('.ad-showing')) return;
document.querySelector('video').currentTime = 1000;
await (async () => new Promise(r => setTimeout(r, 100)))();"

Click this link to find ChatGPT's instruction how to create and install the Chrome Extension. It's really simple!

Loop a YouTube Video with 2 lines of code

wimdenherder — Wed, 13 Dec 2023 06:30:32 +0000

Copy paste this in the developer console:

v = document.querySelector('video')
v.onended = () => v.currentTime = 0

A very simple trick to have your video be looped forever! :-)

Creating Freddie Mercury's voice with javascript

wimdenherder — Tue, 04 Jul 2023 08:31:05 +0000

PS: Listen to the result here: https://freddievoicejavascript.web.app/

I've always been fascinated with Freddie Mercury's voice (leadsinger of Queen). Especially, there is a moment in 'Who wants to live forever' on the high B note, where his voice has a golden glitter over it.

If you click here, it starts at the high B note!

Queen - Who Wants To Live Forever (Official Video) - YouTube

Taken from A Kind Of Magic, 1986.Click here to buy the DVD with this video at the Official Queen Store:http://www.queenonlinestore.comThe official 'Who Wants...

youtube.com

Analysing this note with spectrogram reveals that it's due to the overtones why this particular note has such a heavenly sound. Where you associate heaven with up in the skies, you hear the high overtones as heavenly sounds.

Analysing this musical note through the lens of a spectrogram unveils a fascinating insight: the sublime, ethereal quality of this note stems from its overtones. The association of heaven with celestial heights echoes in the auditory experience of the high overtones, translating into what can be described as aural divinity.

I analysed the frequencies and came to this array of [frequency, volume]

let freddie = [[500,1],[1000, 40], [1500, 5], [2000, 10],[2500,10],[3000,15],[3500,10],[4000,5]]

Pay attention to the ratio's here.

First we have 500 Herz, this has a very weak volume of 1%. Let me explain this rare oddity. Freddie's voice actually makes the ventricular folds vibrate along with the vocal folds one octave lower (!!). The ventricular folds This is a technique only known in throat singing, but really a rarity for pop/rock singers.

What they discovered was that he likely employed subharmonics, a singing style where the ventricular folds vibrate along with the vocal folds. Most humans never speak or sing with their ventricular folds unless they’re Tuvan throat singers, so the fact that this popular rock vocalist was probably dealing with subharmonics is pretty incredible.

Then we have 1000 Herz. This is the high B note, that you actually hear, the real note. The rest are overtones that give rise to the sound pallet, that golden shine over his voice.

What is remarkable is that the 3000 Herz is a very strong overtone. This is the ratio 3:2 to the octave 2000 herz. In music harmony it's called the fifth. This is what gives the voice the golden glitter! And it's 37,5% (15/40) of the original volume of the basic tone, and that property of Freddie's voice is really special. It makes his voice the unique voice in the world. Especially considering that it's also in the high range.

Then I added another typical feature of Freddie's voice. His pretty fast vibrato at 7 Herz. I added also some random aberrations to the vibrato to make it sound more human.
Here is the script that you can just run in your browser (for example in the javascript console):

// this imitates the spectrogram of freddie mercury's voice in who wants to live forever

async function playFrequencies(baseFrequency, duration, frequencyVolumeArray, vibratoDepthPercent = 2, vibratoSpeed = 7, maxRandomness = 0.2) {
  // Create AudioContext
  let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

  let pitchRatio = baseFrequency / frequencyVolumeArray[0][0];
  console.log('pitchRatio', pitchRatio)

  // Create a list of promises
  let promises = frequencyVolumeArray.map((freqVol) => {
      // Extract the frequency and volume
      let frequency = freqVol[0];
      let volume = freqVol[1] / 100; // Convert percentage to decimal

      // Create oscillator for the frequency
      let oscillator = audioCtx.createOscillator();
      oscillator.frequency.value = pitchRatio * frequency; // Set base frequency

      // Create a GainNode to control the volume
      let gainNode = audioCtx.createGain();
      gainNode.gain.value = volume;

      // Create vibrato oscillator and gain
      let vibrato = audioCtx.createOscillator();
      let vGain = audioCtx.createGain();

      // Connect the vibrato to the main oscillator frequency
      vibrato.connect(vGain);
      vGain.connect(oscillator.frequency);

      // Connect the oscillator to the gain node
      oscillator.connect(gainNode);

      // Connect the gain node to the output destination
      gainNode.connect(audioCtx.destination);

      // Function to update vibrato parameters
      const updateVibrato = () => {
          let randomDepthVariation = (Math.random() * 2 - 1) * maxRandomness; // -5% to +5%
          let randomSpeedVariation = (Math.random() * 2 - 1) * maxRandomness; // -5% to +5%
          let adjustedVibratoDepth = vibratoDepthPercent * (1 + randomDepthVariation);
          let adjustedVibratoSpeed = vibratoSpeed * (1 + randomSpeedVariation);
          vibrato.frequency.value = adjustedVibratoSpeed; // Vibrato frequency
          vGain.gain.value = frequency * (adjustedVibratoDepth / 100); // Vibrato depth
      };

      // Start the oscillator and vibrato
      oscillator.start();
      vibrato.start();

      // Update vibrato parameters every 0.5 seconds
      let vibratoInterval = setInterval(updateVibrato, 500);

      // Return a promise that resolves after the sound finishes
      return new Promise((resolve) => {
          setTimeout(function() {
              clearInterval(vibratoInterval);
              resolve();
          }, duration * 1000);
      });
  });

  // Wait for all sounds to finish
  await Promise.all(promises);

  // Close the AudioContext
  audioCtx.close();
}

let freddie = [[500,1],[1000, 40], [1500, 5], [2000, 10],[2500,10],[3000,15],[3500,10],[4000,5]]

// Play frequencies with their respective volumes, with vibrato depth of 2% and speed of 7 Hz
await playFrequencies(500, 1, freddie, 2, 7, 0.2);

You can just copy this javascript in the browser (javascript console) or run it in the tag on a page. You'll hear the heavenly sounds :-D</p>

This 15-Line JavaScript Script Dubs Videos in Any Language!

wimdenherder — Sun, 30 Apr 2023 13:36:39 +0000

Let's get straight to the point,

Open a random YouTube video, for example this one about me ;-) or any video with subtitles (automatic subtitles are fine too!)
Open up the developer console (in Chrome: F12)
Paste the 15-line script, and you'll hear everything in Italian!

By the way, if you want another language, open up the developer console and just type lang = 'en' and the script will update the language automatically!

lang = 'en'  // English
lang = 'es'  // Spanish
lang = 'fr'  // French
lang = 'de'  // German
lang = 'it'  // Italian
lang = 'pt'  // Portuguese
lang = 'ru'  // Russian
lang = 'zh'  // Chinese
lang = 'ja'  // Japanese
lang = 'ko'  // Korean
lang = 'ar'  // Arabic
lang = 'nl'  // Dutch, my native language

You can also switch to other video's, it will keep working.

How does this short script actually work?

Thank you for your interest! It's a very simple script, that consists of four parts.

Variables declaration and initialization. I'm using global variables to keep track of the current subtitle, language and subtitles.
The getSubs function, which retrieves the subtitles in the desired language.
The speak function, which speaks the right text at the right time using the Speech Synthesis API.
We will execute the speak function every 0,05 seconds

let lastIndex = -1, lang = currentLang = "nl", ...
async function getSubs(langCode) {
  ...
}
const speak = async () => {
  ...
}
setInterval(speak, 50); // every 0,05 sec

Step 1: Retrieving the subtitles

If you type await getSubs('de') in the console (assuming you pasted the 15-line code above), you will see an array with all subtitles in german! You can ask for any language, because the YouTube API just translates everything for you, cool he! We don't even have to translate it.

Let's break down the code into smaller parts to better understand each step:

Retrieve the caption tracks object (ct):

let ct = JSON.parse((await (await fetch(window.location.href)).text()).split('ytInitialPlayerResponse = ')[1].split(';var')[0]).captions.playerCaptionsTracklistRenderer.captionTracks;

Define a helper function (findCaptionUrl):

let findCaptionUrl = x => ct.find(y => y.vssId.indexOf(x) === 0)?.baseUrl;

This helper function searches in the caption tracks and returns the base URL of the right caption track.
The vssId looks very similar to the languageCode as we will see in the following line.

Build the subtitles URL (url):

let firstChoice = findCaptionUrl("." + langCode);
let url = firstChoice ? firstChoice + "&fmt=json3" : (findCaptionUrl(".") || findCaptionUrl("a." + langCode) || ct[0].baseUrl) + "&fmt=json3&tlang=" + langCode;

In order of preference we would like to retrieve:

a written subtitle in our language (our firstChoice)
any written subtitle (that we translate to our language)
an automatic subtitle in our language
any subtitle (that we translate to our language)

Note that the URL also includes the format (json3) and translate language (tlang) query parameters. The Youtube API does this for us :-)

Fetch and process the subtitles:

return (await (await fetch(url)).json()).events.map(x => ({...x, text: x.segs?.map(x => x.utf8)?.join(" ")?.replace(/
/g,' ')?.replace(/♪|'|"|.{2,}|<[sS]*?>|{[sS]*?}|[[sS]*?]/g,'')?.trim() || ''}));

This line

fetches the subtitles from the previously constructed URL
parses them as JSON
processes the events to extract the text of each subtitle.
It also cleans the text by removing unnecessary characters and formatting.

Let's break down the code into smaller parts to better understand each step:

Fetch the subtitles and convert them to JSON:

await (await fetch(url)).json()

This part of the line fetches the subtitles from the provided URL and converts the response into a JSON object.

Process the events:

.events.map(x => ...)

This part of the line maps over the events array of the JSON object to process each event.

Create a new object for each event:

({...x, text: ...})

For each event, a new object is created that includes all the original properties of the event (...x) and a new text property that will contain the cleaned subtitle text.

Extract and clean the subtitle text:

x.segs?.map(x => x.utf8)?.join(" ")?.replace(/
/g,' ')?.replace(/♪|'|"|.{2,}|<[sS]*?>|{[sS]*?}|[[sS]*?]/g,'')?.trim() || ''

This part of the line extracts the subtitle text from the event's segs property and performs the following operations:

Maps over the segs array and retrieves the utf8 property of each segment.
Joins the segments into a single string with spaces between them.
Replaces newline characters with spaces.
Removes special characters, quotes, multiple periods, and any content within angle brackets, curly braces, or square brackets.
Trims whitespace from the beginning and end of the string. PS: If any of these operations fail (e.g., because the segs property is undefined), an empty string is returned (|| '').

Step 2: Analyze the speak Function

Now that we have the text, we want to let it be spoken! The speak function is an asynchronous function that manages dubbing the video. Its goal is to:

find & speak the current subtitle
synchronize the video with voice
check if the video's URL or language has changed

Let's break down the code into smaller parts to better understand each step:

Update the subtitles if the video URL or language has changed:

if (location.href !== currentUrl || currentLang !== lang) (currentUrl = location.href) && (currentLang = lang) && (subs = await getSubs(lang));

Find the current subtitle based on the video's playback time:

const currentIndex = subs.findIndex(x => x.text && x.tStartMs <= 1000 * vid.currentTime && x.tStartMs + x.dDurationMs >= 1000 * vid.currentTime);

Return early if the script can't find a subtitle (the current subtitle index is -1) or we're still speaking the same subtitle (it's the same as the last subtitle index):

if ([-1, lastIndex].includes(currentIndex)) return;

If the previous subtitle is still being spoken, we will pause the video as long as the voice is defined.

if (voice) return vid.pause();

If there is no voice from previous subtitle, we can resume video playback and create a new SpeechSynthesisUtterance with the current subtitle:

vid.play();
voice = new SpeechSynthesisUtterance(subs[(lastIndex = currentIndex)].text);

Set the language and event listeners for the SpeechSynthesisUtterance and adjust the video volume:

voice.lang = lang;
voice.onend = () => (vid.volume = baseVolume || 1) && (voice = null);
vid.volume = 0.1;

Start the speech synthesis:

speechSynthesis.speak(voice);

Conclusion:

In this tutorial, we explored the getSubs (get subtitles) and speak function, which is responsible for synchronizing the video playback and the Speech Synthesis API to dub YouTube videos. You can see how simple and short a script can be! I hope it inspires you!

Note: The quality of the dubbing may vary depending on the available voices for the Speech Synthesis API in your browser and the quality of the subtitles.

Impersonating a google service account

wimdenherder — Fri, 31 Mar 2023 20:39:54 +0000

PS: this blog is not very clear, just a reminder for myself in the future, when I encounter something similar. Sorry!

Create a google cloud project
Enable Drive API
Create service account credentials
Login as admin in your domain and
Follow the steps here:

https://developers.google.com/identity/protocols/oauth2/service-account#httprest

install

npm init
npm install googleapis
npm install google-auth-library

create a file index.js and replace the email and credentials path below:

const { google } = require('googleapis');
const { GoogleAuth } = require('google-auth-library');
const fs = require('fs');

async function listFiles(auth) {
  const drive = google.drive({ version: 'v3', auth });

  try {
    const response = await drive.files.list({
      pageSize: 10, // Adjust this value to control the number of files returned per request (max: 1000)
      fields: 'nextPageToken, files(id, name, mimeType)',
    });

    const files = response.data.files;
    if (files.length) {
      console.log('Files:');
      files.forEach((file) => {
        console.log(`${file.name} (${file.id})`);
      });
    } else {
      console.log('No files found.');
    }
  } catch (error) {
    console.error('Error fetching file list:', error);
  }
}

async function main() {
  const SERVICE_ACCOUNT_FILE = 'YOURCREDENTIALS.json'; // Replace with the actual path to your service account credentials JSON file

  const auth = new GoogleAuth({
    keyFile: SERVICE_ACCOUNT_FILE,
    scopes: ['https://www.googleapis.com/auth/drive'],
    clientOptions: {
      subject: 'EMAIL@DOMAIN.COM' // Replace with email to impersonate
    },
  });

  const client = await auth.getClient();
  listFiles(client);
}

main();

It was hard to find the right way, so that's why I wrote this blog to help myself and others!

How to toonify yourself

wimdenherder — Wed, 25 Jan 2023 21:58:41 +0000

Artificial intelligence is rapidly advancing, and it is now possible to utilize it to create a cartoon version of oneself. One can visit the website https://huggingface.co/spaces/PKUWilliamYang/VToonify to experiment with this technology. However, it should be noted that the server may be overwhelmed, leading to difficulties in accessing the video feature.

To overcome this issue, one can use the colab link and should first convert the video to the .mov format using the following command, which requires the installation of ffmpeg on one's computer:

ffmpeg -i <YOURVIDEO> -c:v libx264 -profile:v main -pix_fmt yuv420p -s 1280x720 -b:v 9710k -r 30 -g 30 -keyint_min 30 -c:a aac -ac 1 -ar 48000 -b:a 242k -strict -2 <OUTPUTNAME>.mov

Here is the link to the google colab page: https://colab.research.google.com/github/williamyang1991/VToonify/blob/master/notebooks/inference_playground.ipynb

You should execute the necessary steps, including uploading the video and rescaling it.

To download the resulting video, the traditional right-click method may not work. Instead, one must use the Chrome Developer Console by pressing cmd+shift+c and clicking on the video element to find the path, which will be in the format of "temp/output9f832f8huh".

Go to sidebar on the left with files
click .. to go to parent folder, and then open folder temp and the output file, click the dots to open menu to download it

Now mix it with original audio
ffmpeg -i <originalvideo>.mov -i <toonify-video>.mov -c:a copy -c:v copy -map 0:a -map 1:v -y <outputfile>.mov

This is own software that I run very often

wimdenherder — Sun, 15 Jan 2023 05:53:06 +0000

The following are apps that I wrote for myself and actually use super often. They really increase my well-being, so I thought I share it with you, just for inspiration.

YouTok

I made a tiktok version of YouTube. You can scroll down and the video's play immediately. This works really well for music and subjects you want to explore. You can log in and save favorites. It's also very addictive.

Tune The Day

This is a time management bot, that I use daily. A friend has even used it continuously since March 2019. You can log activities via a Telegram bot. The bot offers a menu with your most popular activities. Just a click and it starts logging. It has also lots of text-based inputs, like:

french (I start French right now)
20 code (I started to code 20 minutes ago)
14:00 guitar (you can reset and go back 24 hours)
/viewWeeklyTotals or short .vwt
/zeur (see your daily totals so far)

Dubbify

This chrome extension creates automatic translated voice-over for YouTube and NPO.nl. Really nice if you want to learn a language. I also made algorithms that teach you by going through video's step by step, for example: french-french-english and then word by word french-english.

NPO dubbify

Same for dutch television npo.nl

GPT-for-YouTube

This chrome extension delivers a summary of the video (based on subtitles). It splits the video up in the max size that GPT can handle. You can even 'zoom in' on the summary. There is also an option to see timestamps in the summary, so that you can easily go to that part

GPT-for-any-site

It summarizes any page. You can ask questions about the page (custom prompt)

Music lessons scheduling

For my schools Guitar Academy and Drum Academy I use a spreadsheet scheduling system that automates many things: sending payment e-mails, scheduling e-mails, processing changes, etc. It gave me a lot of free time and taught me Google Apps Script.

YouTube Quality Ranking

This chrome extension helped me find so much great content on YouTube! I adjusted an existing Thumbnail rating extension. In my version I'm calculating likes / views. This is a so much better indication of quality: how many liked it? Instead of likes vs dislikes.

YouTube Mp3 from the terminal

You type in mp3 + url and it downloads the mp3. You can't go any quicker than that.

Backingtrack machine

An interface that guides you to find the right backing tracks for jazz, gypsy, rock, metal. You can choose from a list of standards and it starts immediately. You can also explore solists over the songs.

Whatsapp translator

It automatically translates all messages. Really great if you're learning a new language!

Dubchat

This is a continuation of fantastic tutorial. Now I'm using this as my own chat-app and I've added bots, autoplayed preloaded video, translated and spoken (text to speech) messages, a profile page and funny sounds. Only problem: nobody else is active on the app ;-)

PS: I wrote a blog why you should build your own software here: https://www.linkedin.com/pulse/why-i-build-everything-myself-wim-den-herder/

Thanks to:

GPT-for-YouTube is based on GPT-for-Google
GPT-for-anything is based on summarize.site chrome extension
Dubchat is based on dev lama's tutorial chatapp in firebase react
YouTube Quality Ranking is an adjustment of Thumbnail Rating Bar for YouTube

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

wimdenherder — Sat, 14 Jan 2023 20:48:16 +0000

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);
    }
  });
}

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.

Fetch youtube api for free (in dev console)

wimdenherder — Fri, 21 Oct 2022 18:38:43 +0000

You have to be on the youtube.com website, open the dev console, and then you can actually find results from the youtube api for free:

async function fetchYtInitialData(url) {
  let pageHtml = await (await fetch(url)).text(), result;
  try { return JSON.parse(pageHtml.split('var ytInitialData = ')[1].split(';</script>')[0]); } catch(err) { console.error(err) }
}

async function freeYoutubeApiCall(query) {
  ytInitialData = await fetchYtInitialData('https://www.youtube.com/results?search_query=' + query);
  const videoData = [];
  ytInitialData.contents.twoColumnSearchResultsRenderer.primaryContents.sectionListRenderer.contents.forEach(y => y.itemSectionRenderer?.contents.forEach(x => { 
      if(x.videoRenderer) videoData.push(x.videoRenderer);
    })
  );
  return videoData;
}

let results = await freeYoutubeApiCall('rick roll');
results;
results.map(x => x.videoId);

Get the view count of YouTube Video (without api key) and title and anything else

wimdenherder — Sun, 19 Jun 2022 06:44:14 +0000

Update: this only works in your browser in developers console if you're on the youtube page (otherwise you'll get a cors error). This is super useful for chrome extensions in which you execute content-script.js on the youtube page!

You can get the view count of a YouTube video without an api key. Here is the secret formula and quick solution:

async function getViews(videoId) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const viewCount = html?.split('viewCount":"')?.[1]?.split('"')?.[0];
  return viewCount ? parseInt(viewCount) : null;
}

]

Get more data from the video

Every Youtube page has a very useful ytInitialPlayerResponse variable. In this you can find subtitles, view counts, etc.

Go to any YouTube video
Open developer console
Refresh the page (important)
past ytInitialPlayerResponse in the developer console
you'll have lots of info at your disposal now!

The view count is under videoDetails. In my solution i'm just searching (with split) on viewCount: " and I'm taking the first result.

It would be better to be able to work with this ytInitialPlayerResponse variable. I found out that it's this part up to var meta = document.createElement('meta')

JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0])

You could get the complete video data with this:

async function getYouTubeVideoData(videoId) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const ytInitialPlayerResponse = JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0]);
  return ytInitialPlayerResponse;
}

Get video Title

async function getYouTubeVideoTitle(videoId) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const ytInitialPlayerResponse = JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0]);
  return ytInitialPlayerResponse.videoDetails.title;
}

await getYouTubeVideoTitle('dQw4w9WgXcQ');
// will return 'Rick Astley - Never Gonna Give You Up (Official Music Video)'

You can return any parameter from the ytInitialPlayerResponse object:

You could even retrieve the subtitles in two steps

// if no languageCode is given, then return first subtitle from the list
async function getYouTubeSubtitle(videoId, languageCode) {
  const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`);
  const html = await response.text();
  const ytInitialPlayerResponse = JSON.parse(html.split('ytInitialPlayerResponse = ')[1].split(`;var meta = document.createElement('meta')`)[0]);
  const captionTracks = ytInitialPlayerResponse.captions. playerCaptionsTracklistRenderer.captionTracks;
  const captionTrack = languageCode ? captionTracks.find(c => c.languageCode === languageCode) : captionTracks[0];
  return await fetch(captionTrack.baseUrl);
}

await getYouTubeSubtitle('dQw4w9WgXcQ');
// will return 'Rick Astley - Never Gonna Give You Up (Official Music Video)'

Run npm packages in developers console on any site

wimdenherder — Sun, 29 May 2022 14:05:29 +0000

If you want to test a npm package directly in the browser, there is a way to do this!

How?

The tric is to load a javascript file programmatically in the developers console:

const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);

Only what is bundle.js?

That's a bundle that we will create in a minute with browserify.

And what is localhost:666/

That's a local server that you will serve (later in this tutorial), because chrome browser does not allow local files to be loaded.

Let's start building

You can replace cheerio with any npm package you like (but not all of them work in the browser)

Open up a new directory
npm init -y
npm i -D browserify http-server (as dev dependencies)
npm i cheerio (or any package you want to use)
touch main.js
code . (launch visual code studio)
in main.js edit the following:

const cheerio = require("cheerio");
window.cheerio = cheerio; // this makes it available in the console later

in package.json add the following:

"scripts": {
    "serve": "browserify main.js -o build/bundle.js && http-server -p 666 build/"
  },

npm run build
open browser
check if this loads: localhost:666/bundle.js
if so copy paste this to Chrome's developers console (on any page)

const script = document.createElement('script');
script.src = 'localhost:666/bundle.js';
document.body.appendChild(script);

Now play around in your developer console with the npm package, in our case:

const $ = cheerio.load(document.body.innerHTML);
$('a');

PS: Not all npm packages work, I tried request but it gave an error in the developer console. But nowadays I would recommend to use the new standard fetch for this.

Github: You can clone this repo also!