https://github.com/avcbcoder/avc-webplayer

A chrome extension 🌐 which lets you control your music ⏪⏩ from anywhere and can create mini window for videos 🎦. Checkout the website to know more...
https://github.com/avcbcoder/avc-webplayer

brainfm chrome-extension jquery lyrics-fetcher npm-packages react react-dom spotify-api youtube youtube-api-v3 youtube-search

Last synced: 2 months ago
JSON representation

A chrome extension 🌐 which lets you control your music ⏪⏩ from anywhere and can create mini window for videos 🎦. Checkout the website to know more...

• Host: GitHub
• URL: https://github.com/avcbcoder/avc-webplayer
• Owner: avcbcoder
• License: mit
• Created: 2019-08-03T22:44:53.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T03:31:18.000Z (over 2 years ago)
• Last Synced: 2025-02-10T06:12:36.399Z (4 months ago)
• Topics: brainfm, chrome-extension, jquery, lyrics-fetcher, npm-packages, react, react-dom, spotify-api, youtube, youtube-api-v3, youtube-search
• Language: JavaScript
• Homepage: https://avcbcoder.github.io/projects/#02
• Size: 5.2 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# AVC - Web Player 

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/fold_left.svg?style=social&label=Follow%20%40avcbcoder)](https://twitter.com/avankyankit)

[![GitHub followers](https://img.shields.io/github/followers/avcbcoder.svg?style=social&label=Follow&maxAge=2592000)](https://github.com/avcbcoder?tab=followers)

AVC Web player is a Chrome Extension which lets you control your `music streams (spotify/music.youtube/brainfm)` from any browser tab.

It can create a mini window which always stays on top, so that you can watch videos while working also.

And it enables the functionality to videos of all tabs, so that they can be played in mini window mode.

#### Build with  ![](https://img.shields.io/badge/-React-blue) ![](https://img.shields.io/badge/-StyledComponents-yellow) ![](https://img.shields.io/badge/-Javascript-red) ![](https://img.shields.io/badge/-HtmlCanvas-9cf) ![](https://img.shields.io/badge/-MeadiaStreaming-ff69b4) ![](https://img.shields.io/badge/-JQuery-green)

#### Stable release version : ![](https://img.shields.io/badge/version-1.1.3-blue)

----

## User Guide 

#### For Music (Spotify) streaming : 

There should be a spotify tab opened in the background

- [x] Control your music from any tab.

- [x] Get `Lyrics` of the currently streaming song.

- [x] Get `Youtube Video` of the current song.

- [x] You can directly create a `mini window` of the song/video from the app itself. (view demo video for details)

#### Mini Window button :

* A script is injected in every tab (new/refreshed) to add mini window buttons.   

* The injected script attaches mini window button to every loaded video available on the page.  

* Using this button you can start/stop mini window view for videos.

---

## Demo










---

### Installing

1. Clone this repo (git required)

```

git clone https://github.com/avcbcoder/Mini---spotify-youtube

```

2. Install dependencies (npm/yarn required)

```

npm install 

or

yarn

```

3. Make build for chrome

```

npm build 

or 

yarn build

```

### Deployment

* Toggle Developer mode

```

Got to chrome://extensions/ and enable developer mode

```

* Add extension

```

Add extension and select build folder of the project

```