n-ce/ytify

Opus Audio Streaming Web App for YouTube. Stop watching, Listen & Save Data.

ytify is a simple WebApp, built with vanilla TypeScript for maximum efficiency, that streams only audio from YouTube. Listen to Podcasts, Audiobooks, Music, Livestreams and other Audio focused YouTube Videos, even under the lowest network conditions.

As covered in https://blog.csdn.net/gitblog_00024/article/details/139895018

What else are you getting ?

• Queue 🚦:
  • Add multiple streams to keep your audio streams going.
  • You can share your queue with anyone just by sharing the url.
  • Auto-Queue : automatically enqueues relevant streams.
• Playlists 🎶:
  • View YouTube playlists , queue them to the player. You can also both subscribe and import it into your own collection
  • ytify Collections : create your own playlists disconnected from YouTube, share it with the world with share link.
• Theming 🎨:
  • Modern Autonomous themed UI based on stream thumbnail.
  • High Contrast Mode for increased legibility.
• PWA 📱: Install as an app on your device which also allows you to play YouTube links with it from your OS share menu.
• Radio 📻: Fetches similar streams and creates a playlist for your stream, great for music listeners.
• Library 📚: Discover feed, history, favorites, Channels, YouTube playlists, custom playlists (collections) & Subscription Feed!

WHY / The story of ytify with n-ce

• I was an avid NewPipe user back in 2021, which I used for background playback.
• I noticed it wasn't able to stream under low network conditions.
• So i decided to create an issue.
• Upon finding no active resolution on the issue, I took it to myself and created this project on Jan 2022.

Usage 👆

https://ytify.netlify.app is the only official location that the main branch is directly connected to.

• Full Usage Guide is available at wiki>usage
• Join our Telegram Community @ytifytg
• Join our Matrix Community @ytify

Privacy Policy 👁️

We use Beampipe Analytics for minimal site stats, only the browser user-agent data is collected anonymously for this. Everything else remains on your device only, which can also be cleared anytime.(Library>Clean, Settings>Restore Settings,Clear Caches). Why collect data? I do not possess a multitude of devices, the analytics help me figure out which devices are suffering from incompatibility or if a failed update has been made or if some API instance has stopped working.

License 📝

Read More.

Contributing 📋

This project is actively seeking contributors, Read More Here.

Development 🔧

1. Prerequisites : Node.js , Beginner TypeScript Knowledge.
2. Clone repository with

git clone https://github.com/n-ce/ytify --depth 1

or

 gh repo clone n-ce/ytify -- --depth 1

3. Move to Directory, Update & Install Dependencies

cd ytify ; npm run update; npm i

4. If you prefer using DevTools, you may disable eruda in vite.config.ts injectEruda(false),

5. Start the development server and open localhost

npm run dev -- --open

6. Learn More at our wiki.

Acknowledgements 🙏

• Piped - YouTube Data API & Adaptive Streaming Proxy
• Invidious - YouTube Data API & Progressive Streaming Proxy
• Cobalt - YouTube Download API
• wsrv - Image Proxy Provider
• Solid - Delightful JSX Library
• HLS.js - HLS Support Library
• Netlify - Hosting, PR Previews, User Feedback Forms, Edge Functions
• Vite - Development Server, Code Bundling, Project Scaffolding.
• Autoprefixer - CSS Prefixes Solution.
• Remix Icons - Efficient Icon Solution.
• Google Fonts - NotoSans Font.

ytify's Issues

Improve CSS Cross Browser Compatibility

The current CSS foundations are heavily based off chromium/blink supported prefixes.
Extend the css codebase to engulf all modern browsers supported css prefixes.
Location { ytify : Stylesheets }

Migrate to inbuilt extractor using youtube dl exec

Current extractor is an outsourced URL.
Reason for change : takes longer time processing, not all links work.
Create a new extractor using npm module YouTube DL exec which will provide the file to be played to the audio source.

Line on Focus :

ytify/script.js

Line 38 in a94607e

audio.src = `https://projectlounge.pw/ytdl/download?url=https://youtu.be/${x}&format=${c}`;

Where x is the video id & c is the codec value such as 249, 251.

PR to the "node" branch.

Add a track progress line

Add a progress bar with timing display so user can skip from & to the desired place.

implementing netlify forms for user feedback

Currently the only way of feedback is github issues, integrating netlify forms would mean users will be able to provide feedback with zero fuss.

Create own theming system

Removing dark mode but integrating a new theming system that involves theming both background & elements on the page.

When background color will be chosen as black it will suffice for a dark mode.

Improve Readme

• More Structured
• Concise
• Updated Information

Improve Readme

Aim : To be clean, professional & including all that which ytify is capable of.
Also have a Thanks To section consisting of :

• YouTube.com - Hosting Content.
• Spck.io - Coding Platform.
• YouTubeDL - Extractor.
• Projectlounge.pw/ytdl - Links Provider.
• Spectre.CSS - Design Framework.
• Netlify.com - Hosting Site.

Provide Links to Readme thanks section

In the thanks to list, every title should link to each and every corresponding official website
For example
youtube.com

Identify & report bugs

Report bugs by creating new issues, this is to ensure the stability of the upcoming v3 release.

add an interface for queue

on Queue button click opens up a modal displaying list of queued streams

Create a music player like UI

A music player app like interface.

404 page

A custom 404 page would look great as the default one does not really fit the colorscheme of the website.

The custom one...

• ...looks boring and does not match the colorscheme
• ...has no icon

A custom 404 page...

• ...could match the colorscheme
• ..could have an icon

Overhaul Readme

Complete rewrite is needed here along with newer screenshots.
Professional, marketing based dialogues are to be avoided as this is a very freestyle project.

Have playback started without any clicks

Current behavior : new playback on thumbnail click
Desired behavior : automatically start playback on new link detection

switch to m4a when low bitrate opus unavailable

Observation : Newly uploaded streams do not have many bitrates to choose from. By default (low settings) ytify chooses the lowest bitrate opus stream, which in these cases would be a ~128kbps stream, which isn't so low.

Requirement : Switch to lowest available m4a bitrate, usually a ~48kbps streams, when this is the case and update the bitrate selector to only show that bitrate.

Note : when quality is set to high this switching wouldn't be required.

Add support for Live Youtube Videos

Would be great if we could stream audio for live-streamed videos

PWA is not loading cached assets

Looping through this instead of loading the cached assets in sw.js

Add queuing support

To be able to queue links as many possible
Which will play serially one by one.
Custom clicking on a queue might be approached later.

Add Next track Support

A continuation of #3
To be able to skip current playing to directly next in queue.

Remove SpectreCSS dependency

As its outdated and inefficient for the further development of the project, we will migrate to pure CSS.

Improve HTML

Make changes to the html code to make it more readable and standard with proper commentary.

Firefox support

For Firefox users clipboard API does not work to which an alternative must be provided.
For the moment, we would like to use an input box to paste link manually.

Pseudocode: onsubmit = script();

add yt playlist support

add ability to capture youtube playlist urls and transfer tracks into queue.

PWA: receiving shared link by OS using webShareTargetAPI

I just came to realize this api exists and It's mind blowing!

Source : https://developer.chrome.com/en/articles/web-share-target/

Goal : When installed as a PWA, ytify must show up in the os share menu. We can then directly share links(from yt app or site) to the PWA without opening it up, removing the need to copy and paste links for PWA users.

LET'S DO THIS

Create an input field

Pseudocode:
if navigator copytext not available input display = block; Else display = none (default);
Continuation of #10

Add player controls

• Add Play/Pause button
• Add 10 second Rewind button
• Add 10 second Forward button

subtitles are not in english where multiple lang subtitle objects are present

Location :

ytify/scripts/main.js

Line 68 in 655f601

audio.firstElementChild.src = data.subtitles[0].url;

What we want :

Extract english lang subtitle from list of objects when subtitle array length is greater than 1.

Improving Desktop View

Screenshot from pagespeed.web.dev

Since i do not have a desktop computer i have not been able to successfully render a proper view on the desktop despite my several attempts, it always looks underfunctioning.
It is my request to interested developers who want to work on this to improve the web app experience on desktop.

What requires changing?

• The player container width should be equal to the data container.
• The text on the data container should be large enough to fill it. Currently there is this white unused space which makes it look worse.
• button labels should be readable.
• and or anything the assigned developer thinks should change.

add audio stream duration to the player

e.g - 0:00 ------------ 2:49
e.g - 0:30 ------------ 2:49
There is not any information being showed in the player about the stream

• full duration
• current duration

Show youtube video title

Extract the video title from the video id.

Complete support for users w/o clipboard API

Making all functions work for Firefox users and clipboard permission blocked users.

Redesign & Rewrite

This site has to go under redevelopment after a long hiatus.

We will

• start by having a skeleton UI ready,
• proceed with incorporating new functions (eg. Format 600, following semantic versioning),
  • HTML
  • CSS
  • JS
• finish with focusing on fixing bugs.
• Documentation

Use piped API to fetch stream url

https://github.com/TeamPiped/Piped

Currently we use a custom personal backend to fetch urls but it does not support a lot of youtube videos.
To circumvent this we use a maintained and efficient backend like the piped API which would be much more fruitful to this project.

Extract youtube video title from url

Have a p element contain the title.
Have the p innertext updated by putting the code inside atsrc(x);
Where x is the unique id of the video.

Add a custom html audio player

Replace the default html audio player with a simple custom player which can support the user interface of the overall site.

Google Search Engine does not show website

When searching "ytify" the main website does not show as a result.

big thanks man hope I can help but I borrow a computer the next time really support this

thanks man I really need this I'm in friends now and the connection is always horrible it's just jarring to pull down 200 when audio is really in my opinion now it's 16 kilobit cutting Edge

I used to work in signal processing in Berlin academically

At the moment it doesn't work I think no pipe had an update today I think YouTube did something

Doesn't work on few youtube videos

Hello, I liked the product being built and tested a few things, but when I tested with few links from a particular channel. the video doesnt seem to load. Tried clearing cache/cookies and tested again.

What was Tried ?
The video doesn't seem to load when the video link was copied to clipboard and when I switched to ytify website.

What were the links used ?
https://www.youtube.com/watch?v=8tR8LAsjJHY&ab_channel=SETIndia
https://www.youtube.com/watch?v=cn7mk9M9-pU&ab_channel=SETIndia
And any video from SETIndia Channel

Add server region select feature for country code based server allocation

• We will use the client side date time to ascertain the region.
• Then allocate it to closest available piped instances.
• A list of all instances are available here.

Improve the styling [CSS]

Improve the styles of the site to make it look better and responsive on all range of devices. Fonts, Color scheme changes are also allowed.

Add Loop Checkbox

Add a checkbox button for loop
If checked
Audio onended = restart playback

Organize CSS

Arrange the CSS in an efficient manner with proper commenting.

Update readme & add instructions

Since we are moving the about section from the website to this github repo, have an usage section displaying how to use instructions and per button function.

Modularize the JS CodeBase

Since the codebase is huge its becoming increasing difficult to maintain and develop. To solve this we separate the script.js file into various modules as per functions using JS modules import export.

dynamically updating open graph tags for social media previews

Relevant Links

• OGP - https://ogp.me/
• Implementation - https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

Update Strategy

• Reference relevant og tags in lib/DOM.
• Updating them in setMetadata() =>

  ytify/Scripts/lib/functions.js

  Lines 84 to 111 in 3418c4f

  	const setMetadata = (thumbnail, id, streamName, authorName, authorUrl) => {
  	img.dataset.src ?
  	img.dataset.src = thumbnail :
  	img.src = thumbnail;
  	title.href = `https://youtube.com/watch?v=${id}`;
  	title.textContent = streamName;
  	author.href = `https://youtube.com${authorUrl}`;
  	author.textContent = authorName;
  	document.title = streamName + ' - ytify';
  	if ('mediaSession' in navigator)
  	navigator.mediaSession.metadata = new MediaMetadata({
  	title: streamName,
  	artist: authorName,
  	artwork: [
  	{ src: thumbnail, sizes: '96x96' },
  	{ src: thumbnail, sizes: '128x128' },
  	{ src: thumbnail, sizes: '192x192' },
  	{ src: thumbnail, sizes: '256x256' },
  	{ src: thumbnail, sizes: '384x384' },
  	{ src: thumbnail, sizes: '512x512' },
  	]
  	});
  	}

Development List

• Future
  • PlayPrevious button (requires storing streamHistory)
  • Favorites button (saves favorites to localStorage as map)
  • Recommendations feed using indexedDB & related streams averages of favorites
  • Material You colors with material color utilities
  • rewrite cleaner / efficient CSS
  • Github Actions
    • Vite : compile js modules and css into one and minify it
    • Autoprefixer : removes need for manually adding css prefix

View older versions here only for reference : v1 || v2 || v3 || v4 || v5

Changelog

v5.14:

• Tabbed Navigation

v5.13:

• Autoplay
• QueueListUI

v5.12 :

• search suggestions

v5.11 :

• search filters
• subtitle selector
• settingsMenu instead of list

v5.10 :

• Search

v5.9 :

• Subtitles
• Related Streams

v5.8 :

• Settings inside Player container
• all DOM references with getElementByID (why?)
• avif images => webp to extend browsers support as well as less computationally expensive
• incorporated luuvdk's colorjs' image data processing algorithm directly into themer()
• replaced local storage with html data attributes for data binding
• new found optimizations and fixes which were previously unseen

v5.7 :

• Share youtube link into ytify PWA
• m4a fallback when opus unavailable
• feedback button
• substantial performance gains

v5.6 : Seek Backward && Forward buttons

v5.5 :

• icons with labels below
• bitrate select menu

v5.4 :

• Using Remix Iconset for quicker site load
• Removed Color.js dependency which was slowing down site with blazing fast 6 line code

v5.3 :

• query enhancement : playlist query && time query
• piped fetch error reporting
• dont depend on a single piped instance

v5.2 : replace personal backend with piped api

v5.1 : current and full duration info

v5 :

• Newer and simpler UI
• A new theming engine
• Code Efficiency Increased
• Memory Consumption Decreased
• personal backend api
• 200+ lines of code removed
• code maintainence made easier

v4 :

• remove spectre css dependency
• code modulariztion
• color accents extraction from thumbnail for theming
• separate gradient themes
• functional ui design

v3 :

• current track title
• better thumbnail source
• thumbnail setting
• queue badge
• standardiztion
• optimization
• code reduction

v2 :

• removed howler.js depenency
• audio controls
• save settings support
• dark mode
• 128kbps hq button
• pwa support

v1 :

• input field to take url
• using howler js to handle audio
• using clipboard api to take url

Text overflowing when title is too large

A Stylesheet issue in the metadata of data container

Reconstructing site with proper HTML

This solves #33

Laggy Buffering

Observation

• Takes 10secs to forever to load stream src.
• while playing stops, takes another gap of time to load next part of the stream, resumes, this continues for the entire playback.

Expectation

• Takes 0-2 seconds to load stream src.
• Plays smoothly without any buffering gaps.

Points

• Happening since a week or more
• Changing Browsers does not solve.
• Changing IP does not solve.
• Changing ytify instance does not solve.
• Changing piped instance does not solve.

Color extractor from thumbnail

We will extract the color from the thumbnail and apply to the site theme when theme is set to auto.