Git Product home page Git Product logo

chromeaudiovisualizerextension's Introduction

AudioVisualizer

♬♫♪◖(●。●)◗♪♫♬ put on some music and turn your browsing session into a party! ┐(・。・┐) ♪
by pressing the av icon or default hotkey: 'Ctrl+Q'
install from the Chrome webstore
or git clone & install the unpacked extension
if you want to contribute, contact me: laderud(a-t)hotmail.com, for an explanation of the code :)

To create your own scene from scratch, copy js/scenes/genericScene.js, to js/scenes/yourSceneName.js, search for and replace "GenericScene" with scene name of your chosing. Also set this.name = 'YourSceneName' where it says SpectrumAnalyziz. (this is the displayed name).
You also need to add the JavaScript file to scriptsToInject.js in the AV.scripts.scenes array.
Then do you own thing inside the update method, (all scenes within the AudioScenes namespace will automatically get picked up by SceneManager, so you should see it in the extension scene dropdown list) g.ctx is the canvas context, and g.byteFrequency is the spectrum data you can use to move thing around the scene.

If you want to use WebGL, look at worldScene.js for inspiration, (the simple SpinningCube scene).
When done, I can merge your scene into the extension :)

Credits to jberg for butterchurn (milkdrop scenes)

chromeaudiovisualizerextension's People

Contributors

afreakk avatar comradekingu 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

chromeaudiovisualizerextension's Issues

Bug destroyed audio

@afreakk
I am on windows 11, recent chrome.
I have installed the extension and whey I click on it after playing a song on e.g. youtube or soundcloud, the sound quality of the music is more than destroyed it become an earrape making my ears almost bleed lol, yet the visualizer work. I have no idea how the visualizer can affect the audio but it destroy it that is very unfortunate.

Desktop version

Hi guys,

Thanks for the awesome work! Just wondering - would it be possible to have the app work as a desktop app - and visualize for all audio - eg. spotify? This is probably hard since you wouldnt have access to the audio stream? Just wondering, love your work otherwise

AudioVisualizer controls issue with Chrome on Windows

I set canvasZindex to -1 so that AudioVisualizer is behind elements on Plex when I play music and that's great.

Screen Shot 2019-11-08 at 11 57 07 AM

On Chrome on Mac I still have access to the AudioVisualizer control panel as shown here:

Screen Shot 2019-11-08 at 12 29 57 PM

However, on Chrome for Windows once I close the AudioVisualizer control panel, it's hidden behind elements until I reload the tab or restart the browser and, even then, the AudioVisualizer controls conflict with elements and are inaccessible.

controlproblem

Only until I change canvasZindex do I have access to controls again.

Is there a way to have the AudioVisualizer control panel on Windows Chrome ignore canvasZindex or have its own canvasZindex as it appears to have in Mac Chrome?

Also the option the move the AudioVisualizer controls to another location would be great as being top-right makes them often cover up important elements.

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.