Git Product home page Git Product logo

html5_audio_visualizer's Introduction

HTML5 Audio Visualizer

An audio spectrum visualizer built with HTML5 Audio API

Demo

See it in action.

Screen Capture

alt tag

html5_audio_visualizer's People

Contributors

wayou 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  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

html5_audio_visualizer's Issues

mapHeight

mapHeight = 2 是为了计算什么

screenshot

  1. 另外自己做的进度条 拖拽时怎么保持同步 ?

Not an Issue, a Thank! I used it in a video, if you wanna see

I needed a spectrum for my first musical video, which is, not the best as people can say (They said it's terrible, well "Ahaon said...) but I like it.

Here's a link of my song with your visualizer!
https://www.youtube.com/watch?v=wKKHBxED6yQ

Colors are matching to my channel :P

some questions, any way to make it a tool that convert the music file into a video one?
maybe a vlc plugin or kdenlive one? also colors setting or similars.

Anyway I like your work! Thank for letting me enjoy it!

Safari 12

The Visualizer does not work in Safari 12.

一个细节的疑问

188~191
var step = Math.round(array.length / meterNum); //sample limited data from the total array ctx.clearRect(0, 0, cwidth, cheight); for (var i = 0; i < meterNum; i++) { var value = array[i * step];
如果 array.length/meterNum == int, 刚好除尽,那么191行中的最后一个 i * step == meterNum,不能获取到最后一个值,是否需要做如下修改:

var step = Math.floor(array.length / meterNum); //sample limited data from the total array ctx.clearRect(0, 0, cwidth, cheight); for (var i = 0; i < meterNum; i++) { var value = array[i * step];

Could you a license?

"Feel free to use" is cool, but where I'm at, the folks in legal will want something more explicit. 😸

Can you add an explicit MT license?

YouTube Video

Hey, I was wanting to use this software in a YouTube video and was wondering if the license applies to YouTube videos made using the software.

If so, what do I need to do?

Integration

Hello!
I'ld like to add your beautiful visualizer into my music player.
How to add the js file? I tried, but it doesn't work...
Could you show me how to do it please?
Thanks!

播放录音问题

我用webrtc录制的音频文件,录制过程中将blob格式的音频转码成ArrayBuffer,再去用相关代码绘制到canvas中,绘制结果是一条不动的蓝虚线,如果将录音文件保存下来,再通过上传文件的方式绘制,是正常的,请问一下,录音过程中怎么绘制呢?

Different source?

Is it possible to make something like this that simply displays the current volume of the page?

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.