Giter Club home page Giter Club logo

audio-only-youtube's Introduction

alt text

Audio Only Youtube (Chrome Extension)

audio-only-youtube chrome extension enables you to disable only video on youtube songs which saves bandwidth when you want to listen songs on youtube.

Note: It doesn't support Youtube live videos.

Installation

You can install extension from here(Chrome Webstore)

Contribute

  1. After cloning the repo, run yarn run start.
  2. Open chrome, go to extensions tab, load unpacked extension and select build/dev directory.
  3. Go to Youtube and see extension in live.

In case you edit code, it would automatically rebuild the extension and after that you need to reload it in the browser.

Thanks to Stefan Ivic for all the icons used in the extension.

Extension Internals

The only reason this extension is able to work is because Youtube serves audio and video streams separately. This extension intercepts response of all the requests on the youtube domains. In the response headers, it checks for Content-Type. If it's an audio file, then it assumes that we have got the audio stream for the video being played. It removes certain range related query parameters in accordance with HTTP RFC's range requests section. Then we set the source of Youtube's video player to audio stream.

Good luck!

audio-only-youtube's People

Contributors

ashish-bansal avatar cuong-now avatar dependabot[bot] avatar dprentis avatar fdesjardins avatar hell-k avatar johnagan avatar max-hk avatar sheldonled avatar xdroni avatar zekrom-vale avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

audio-only-youtube's Issues

Explain the working?

It would be great if the wokring is detailed in the README. or included in this issue. Then it will be easier to contribute and develop on top of this.

Auto save bandwidth when change tab [Extension Mod]

Thank you for this extension!

I was looking for an extension in the same kind to save bandwidth. But, I do not usually use it manually. So I change a piece of code to activate the extension as soon as it leaves the active youtube page.

Here is the code for those interested.

In the background.js file, I changed these lines (127 to 149) ... :

chrome.browserAction.onClicked.addListener(function() {
    chrome.storage.local.get('audio_only_youtube_disabled', function(values) {
        var disabled = values.audio_only_youtube_disabled;

        if (!disabled) {
            enableExtension();
        } else {
            disableExtension();
        }

        disabled = !disabled;
        saveSettings(disabled);
    });
    chrome.tabs.query({
        active: true,
        currentWindow: true,
        url: "*://www.youtube.com/*"
    }, function(tabs) {
        if (tabs.length > 0) {
            chrome.tabs.update(tabs[0].id, {url: tabs[0].url});
        }
    });
});

... by these lines :

var disabled;

chrome.browserAction.onClicked.addListener(function() {
    chrome.storage.local.get('audio_only_youtube_disabled', function(values) {
        disabled = values.audio_only_youtube_disabled;

        if (!disabled) {
            enableExtension();
        } else {
            disableExtension();
        }

        disabled = !disabled;
        saveSettings(disabled);
    });
    chrome.tabs.query({
        active: true,
        currentWindow: true,
        url: "*://www.youtube.com/*"
    }, function(tabs) {
        if (tabs.length > 0) {
            chrome.tabs.update(tabs[0].id, {url: tabs[0].url});
        }
    });
});

chrome.tabs.onSelectionChanged.addListener(function() {
	chrome.storage.local.get('audio_only_youtube_disabled', function(values) {
        disabled = values.audio_only_youtube_disabled;
	
	    if (!disabled) {
			enableExtension();
			disabled = !disabled;
			saveSettings(disabled);
			
			chrome.tabs.query({
			active: false,
			currentWindow: true,
			url: "*://www.youtube.com/*"
			
			}, function(tabs) {
				if (tabs.length > 0) {
				chrome.tabs.update(tabs[0].id, {url: tabs[0].url});
				}  
			});
        }	    
    });
});

I only try to follow the rest of the pre-existing code :)

Not working - Please fix it

Now it no longer working with YouTube. When plugin is enabled then YT does not stream audio.

Please fix it.

Support Youtube music

Now that music.youtube.com is a thing, I do play lots of music there and occasionally there is a video with the track.
Would be awesome to save bandwidth there too !

Enable in current tab only

Hey, thanks for this extension!

I usually leave one tab open for listening to music and others for regular browsing (including YouTube). I imagine many people do the same. Would it be possible to add an option (via browserAction or context menu) to only enable the extension on the current tab?

Thanks for your attention!

Limit suspicious permissions

This extension currently requires Read and change your data on all websites. That is very suspicious, as the extension is only for Youtube. Please limit the required permissions to only Youtube & Google Video domains.

Sound quality is noticeablely low

The sound quality is noticeablely low if the extension is enabled.
I toggle it by the red icon in the youtube screen (quick access button).

Skip Advertisement problem

Hello,

my congrats for the project!
There seems to be some problems when I click to skip advertisement button, e.g. at the beginning of the video.
The advertisement audio continues, so I have to reload the whole page

Inquiry: Making a standalone YT audio player web app

Hi, Ashish

Really appreciate your ground breaking work here and spend all night trying to understand how you did it because I would like to implement video stream blocking in a standalone web app that only streams audio from various video sites for a little side project.

I see that you achieve this via the chrome.webRequest API by blocking the video stream. Apparently you also remove the parameters: ['range', 'rn', 'rbuf'], Is this what stops the video streams?

So, I understand the gist of how this works, but I don't have access to the Chrome ext APIs that you used. Was wondering if you have any ideas how to implement this in an web app scenario. I am planning to use the YT Iframe embedded API. Basically, I imagine that I would have to intercept the XMLHttpRequest made by the YT javascript library and then do something similar to what you did. I was looking at this library here: https://github.com/jpillora/xhook in order to intercept the YT requests.

Was wondering your thoughts on this and if this would work as a standalone implementation.

Use on all kinds of websites?

This extension is such a good idea to save bandwidth, not only on YouTube but all kinds of sites where videos are shown.

Is it possible to easily expand beyond YouTube?

When can Live video be supported?

Hi developer,
I've used your script already. Really good on most video!!
However, I want to use it to listen to music online. I've noticed that most script can't deal with Live Video. Maybe there is a technical issue for it, but I still want to know if there is a chance to have a Live Video supported version later.
Really like what you are working on.
Thank you.

Micro-cuts or drops

While using the extension the audio drops/skips forward and goes back randomly for a tenth of second or so. Pretty fast but still audible.
I'm using Chrome 60.0.3112.90 64 bits on Ubuntu 16.04 LTS on a Lenovo Thinkpad T430 w/ Intel i5 Ivy Bridge. Light use, no CPU intensive tasks at the time.
Great job!

Enable audio-only on youtube tag basis

is it possible to do audio only, or to block entirely the video&audio based on the tags available in the clip ??
For example, filter/block all videos that has the tag "News" or "Vlog" etc. etc.

That would just be amazing if possible..

After pressing the back button, song that was playing plays again

Bug:

  1. Am on main youtube page
  2. Click on song to play
  3. Page loads, song plays, addon correctly blocks video
  4. I click the back button on my browser (mouse back button)
  5. Am back on main youtube page
  6. While still on main youtube page, the song that I was listening to before I clicked back audio starts playing

Source : Commented by someone on chrome webstore.

Extension makes song from playlist repeat forever

Observed on music.youtube.com. If song originally didn't have video stream (music with static image instead of video) then extension make playlist to stuck on such song forever. UI of music.youtube shows that next and next and next songs are playing but instead it repeats just this problematic song.

Youtube player stuck randomly while buffering

I have a slow internet, only ~3.75mbits/s D and ~1mbits/s U. So I would like to thank you for your awesome extension, it really helps to save bandwidth especially when gaming or downloading large files.

One problem, though, is that when it buffers, it skips to the start a few times, sometimes not actually ending up playing and getting stuck as paused. Is there a fix for this? Thanks!

Work with embed's

Hey there,

Great work on the extension, Just wanted to ask is it possible to get it to work on embedded youtube videos?

More specifically I was wondering if it's possible to disable the videos on sites like https://www.dazik.com

Thanks.

Publish your extension to Microsoft Edge Addons website

Microsoft Edge is the second most used browser on the web, making the browsing experience more flexible, offering many more services for users and optimized for Windows devices.

Microsoft Edge supports Chromium extensions, and you can publish your extensions to Microsoft Edge Add-ons website with minimal code changes. Find out more here.

If you have any more queries about porting Chrome extension to Microsoft Edge or anything else, you can contact the relevant teams whose links are given here.

Let me know if this was helpful. I am happy to help you with more details.

Scope permissions

Read and change all your data on the websites you visit

"permissions": [
"tabs",
"webRequest",
":///*",
"webRequestBlocking",
"storage"
],

I think as many other people that permissions should be scoped only to youtube.com* sites, please let know if this will be implemented, thanks.

No longer blocks video thumbnails?

Description

I've been using this extension for a few months ago. Recently, I noticed that it now shows a thumbnail for the video playing. To be clear, this only applies to the actual video element, for the video that is currently playing. The suggestions' thumbnails are blocked as expected.
See images below:

Expected (previous) behaviour

Imgur link

Actual (current) behaviour

Imgur link

Is this due to some CSS change on youtube? Or have there been changes been made to this extension? If the latter, could we please have an option to toggle this behaviour on or off?
I mainly use this extension in order to NOT SEE even the thumbnail - since some mixes I enjoy listening to sadly have "questionable" (borderline NSFW) images and thumbnails.

Download as .mp3 button

I guess it wouldn't be too hard to allow downloading the audio stream

I could help later, will need to get familiar with the code first

Reason I ask is some services like https://ytmp3.cc/en13/ fail to download the audio with large videos

Show thumbnail overlay image

.ytp-thumbnail-overlay-image remove display:none
.ytp-large-play-button add display:none

JS code:

document.getElementsByClassName('ytp-thumbnail-overlay-image')[0].style.display= '';
document.getElementsByClassName('ytp-large-play-button')[0]= 'none';

This extension saves bandwidth

EDIT: I earlier brashly declared that the extension should be unpublished because all it does is hide the youtube video's html element, saving no bandwidth.

After testing with and without the extension and monitoring the Network tab, I've found that it does save bandwidth. Anecdotally, about 50%. Digging further into the source code, I see it works by intercepting and modifying requests for video data made by the browser.

My earlier claims that the extension saves no bandwidth are entirely false. Sorry. And thank you for the explanation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.