Interactive Spectrogram in the browser!
Same as example in: https://github.com/vlandham/spectrogramJS - but in blocks.
Click ‘analyze’ to play the sound and create spectrogram.
Uses web audio api.
Also uses D3 with canvas to display the main visualization.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SpectrogramJS</title>
<style>
canvas, svg {
position: absolute;
top: 0;
left: 0;
}
.spectrogram {
position: relative;
}
.axis {
font: 14px sans-serif;
}
.axis path,
.axis line {
fill: none;
}
.axis line {
shape-rendering: crispEdges;
stroke: #444;
stroke-width: 1.0px;
stroke-dasharray: 2,4;
}
</style>
</head>
<body>
<h1>SpectrogramJS</h1>
<p>Visualize sounds using a spectrogram - right in your browser!</p>
<div id="vis" class="spectrogram"></div>
<p><a href="https://github.com/vlandham/spectrogramJS">See how to use SpectrogramJS</a></p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="spectrogram.js"></script>
<script>
var sample = new Spectrogram('bird_short.ogg', "#vis", {width:500, height:200, maxFrequency:8000});
</script>
</body>
</html>
OggS ��` `ܖRvorbis D� w �OggS ��` �N4�-���������������vorbis Xiph.Org libVorbis I 20070622 vorbis)BCV 1L ŀАU `$)�fI)���(y��HI)���0�����c�1�c�1�c� 4d �( ���Ij�9g'�r�9iN8� �Q�9 ��&cn���kn�)%
Y @H!�RH!�b�!�b�!�r�!��r
*���
2� �L2餓N:騣�:�(��B-��JL1�Vc��]|s�9�s�9�s� BCV BdB!�R�)��r
2ȀАU � G�I�˱��$O�,Q5�3ESTMUUUUu]Wve�vu�v}Y��[�}Y��[]��a�a�a�a�}��}��} 4d �#9��)�"��9���� d �")��I�fj�i��h��m˲,˲��� �i��i��i��i��i��i��i�fY�eY�eY�eY�eY�eY�eY�eY�eY�eY�eY�eY�eY@h�* @ @�q�q$ER$�r,
Y � @R,�r4Gs4�s<�s<GtDɔL��L
Y @1�q��$OR-�r5Ws=�sM�u]WUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU�АU !�f�j�3�a 4d � �C
Y ��� �К��9�堩����T�'����s�9�l��s�)ʙŠ�Кs�I����Кs�y���Қs���a�s�iҚ��X�s�YК樹�sΉ��'��T�s�9�s�9�sΩ^���9�sΉڛk� ]�s��d��� �s�9�s�9�s� BCV @ a�Ɲ� }�b!�!�t���1�)���FJ��PR'�t�АU �RH!�RH!�RH!�b�!��r
*����*�(��2�,��2ˬ��:��C1��J,5�Vc���s�9Hk���Z+��RJ)� 4d @ d�A�RH!��r�)���
Y �$�������Q%Q%�2-S3=UTUWvmY�u۷�]�u��}�_�eY�eY�eY�eY�eY�e BCV B!�RH!��b�1ǜ�NB �АU � GqǑɑ$K�$M�,��4O�4�EQ4MS]�u�eS6]�5e�Ue�veٶe[�}Y�}��}��}��}��}��u 4d �#9�")�"9��H���� d �(��8�#I�$Y�&y�g�����驢
��� �h�������爎(��i�����lʮ뺮뺮뺮뺮뺮뺮뺮뺮뺮뺮뺮�@h�* @ @Gr$Gr$ER$Er$
Y � �1CR$Dz,M�4O�4�=�3=UtE
Y ��K���$QR-�R5�R-UT=UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU�4M�4�А� #A��r�Bn=X1�$�9����39
"t�A'=��9���R(DL��%7�
¦\I�8BCV Q �1�1�r�IɠD�1 ���9'���I)-�3)%�c㜣�Iɤ�K���c�� � � �А@ bR
)��R�)�R�1�RJ9��S�9��1��)�S�)���A圃�A( � �B(4dE ' �p$ϓ4K%KE�e�Mו4�45QTU�U�TU�MU�%MMM�TUEUUӖMU�m�4e�TU�Uնe�~W�u�3MYU��MU�uז}_�m]�4�45QTUMU�TU�6U5QtUQUeYTUYveY�UW�}KU�SM�UU�U��mU�}�tU]We��UY~[ׅ��}�U��M��uU�}a�ea�u�(i�ij����(�����m���[�誢�ʲg���ʲ���l�(�����,��,�����,붨���ʲ�������,�p��������,뺭��q�0|�)˦�꺩��n�q̶m���*�°ʲ��/�u!QUuݔ]�WeY�m_w�[���m;����q���9�o��m�n�����+?a8��g��m�������n+ì�BQU}]�e�7]Yn�7�[���*˾�ʲ1��o�0]�6�[ם��}c�� �k��q�:��u�� Ǐ � � �@�!+�8 !�S*� tR� �T1!sNJ��PJj!��*� T�IȜ�Jh)��R��PJk���Rk���b� �Ji-��Zj���Z�c2�d�I ��Ji-sNJ砤BJ��KJ-V�Iɠ��AH��SI��PJk��KJ1�[n1�Ji-�[I)�Sm-ƚ#� d�Iɜ�Ji-��Z嘔BJ���JJ���R̜��AH���JI)��JL���JJ��RZl1֜Rl5��ZI)ƒJl-�Z[L�uZ��Ji��Vkj��PJk%�KJ��kn1�Ji��[I��[�-ƚSk5��jn1�[m=֚sJ���R�-ƚcm�՚{� �Ji-��bj-��b����J*���Zl1��Z�9��bI�ŒR�-ƚ[l���jl1�R����sl5��Z�-ƚSK��Zs���V �� @� e�А� @ A�R�Iir�9* B�9'�rLB))U�A%��9))��9%�K*-�Vk))�k- �� �M��
Y D � ������c"�sNJ�c�I�sB*c�A()�PJ*)�JI%�
lДX�А@ `b1� tT2*�LJ'��Z�u�Rk���Zj���@���2K%��Zf�ĘZ+ �� ��B(4d% � @�c�9gb�9�41��*Ɯ�Bc�A!��9!�B��B��B���A!�RJ� �B)�tB��R
*p �Qds���BCV y �1J9��F)� ��R�cJI�rB))�V9���Z� ��Zl5vJi-�ZCJ��Xk�!��b�5��Z���kJ-�Zk � �E6' *4d% � � �c�1�b�1�C)Řs�)�s�9�b�9�s�1�s�9Ƙs�9�s�9�s�9�s�9�s�9�s�9�s� *p �Qds���BCV � Vb�1�1�c�1Fb�1�cl1�c�1Ƙb�1�c�1�c�1�c�1�c�1�c�1�c�1�c�1�c�1�c�1�c�1�[k���Zk���Zk���Zk� @�
�VG8),4d% Øs�9��)褄B�CJ9(%�PJ))sNJJ���ZJ�sRR*%��R� ��ZJ-��Z%��Rj���:���Zk���AH)��Z�-�PJJ���b�5�RRj���b�1��Rl-�c����Zk1�k-)��b���ZkI���b�5�Z �np �H�q�������BCV ! B�9�sB!R�1砃B!DJ1�tB!��1砃B!��1�tB!�:��B��RJ�tB!�PB� �B��RJ)�B(��RJ)%�B ��RJ)��B��J)��B��RJ)��B!�RJ)��RB��PJ)��RJ!�RJ)��RJ !�PJ)��RJ)!�J)��RJ)� � � #�$��"l4��Ph�J � q�j�)�� Ŝ��K��rb.R�9G�eH�Ք1�SRk�b�QO�cJ1ì�VJ(���r��v� 0!3�@� ��) ����1\�2
DŽs�i ����X���b: X\`�������2�]�u � !�����nx�
O�� :E� �
""�9������� �� �$���f����$Dd����% OggS �� ��` \�bHR` &'{b`UTgebcZ_"%$&)'((�(q"&$'+-lZTYY`_Z^ae\VX\v&,,,2/�8
�e|�˽T���6���- L�����E <���l�Y������h��,埂�5FK$�}c��[�6�ߴ.5����5�{
j� `��{�wx ��������6h�_�r�d�_�?GyY�
�������o��YH�ȟ�v���s~��|�-��N�D ���_��u�䷕�D�ϕa�+f��'d����8�W :���>�����p�K��3��0@� �����Up�B���nS��ۆs
�{�X ��R��yk}y`E�� �s��V�<�Zch��� p����9�����:�d�$u �Z�� ^
�~�/��W����e%��4(� ��Ix�� x�Z2�U�lj�����|�� `�v���'}�R p�9�B��AK���`0,)��f�{m �W����7�K���w0���<�� D�� �;%��A����UJ�!h8��e�H����˟ ��h���>� ],��v�N-:;��0g+� ������o5����Ә��J�Tk`���!� ��Ƿ�gY�2a�(�/��:J�/�J�ۃp4p��fp"1e���#y��飫! ~��W �m�Ɵ���r�
`��"R �ɗ��0d\�u��|x��>�ף��
>R��s=˺!�O�v @��Չ҄���k>���_�4��?���D`\ � \� q�Z�;�>��l{0�c8?Q?�r��g+ Q�3������!�Y�w�
��w ���~3]P��� PQ ~������_��L]�+M K֠o
F+�N��l�@C ��y �߇
j���9��{��DZ�D�A`��Η��>��������Ȓ��1�,����Ì�
�7�?"Hm����¤��q � POSL |�t� �>�)QMt��= ��Ht0�>��r0��S�����gK ;Դ�0[ީ�^:��}w�� ^x�_/ S8�?/��+� ��� �<ỳ�xy6�؍���(ckY/�%%kgwB ���;��k�'�j�t�`���tn%��n��g���Y�Qh ^xe_��Ob��G����ub�4X� �" �u�u�L�0+R���[�e�
�5�����>���}�; ����E���_�>���=�
��d��瓉��3��n� zG&��
��wŀ�{����3��T�9�*_�{L'�G�i�!�Fדg��~�J����7e��َ��� �C�MO�� ,A�O��F�/����� B����*))��U�p.H-�����a�^
�`���V�.�������$-_�O�����#�l+@$ħҐ�ڏ��I�jB��$1�o�����;"��7�p?;?�r��� �����?Y �_�Oϊ���Df2p���pjaca��7\�����|} !����P�g�8ޔ ����Ɇ��� _��άR�\_�K���@�aO N�χ�a#Mǩ�'����{?��Lw�9�>����*���ե�dz���%��@���C�*�� �e���gN�v�(��Dj�����, ��õ��˵�ө�6P�k_{��-�i��v��_��v�c����̜�% ���k.:��٩gՀ>Rm��Z�R��>Z ��,�uj���ڢ��â�:
\�)V��)o�� �e��(_� �L ��C�'n�catl��m(j����e��.�B@}�< �!A8 t��%�B�g�sK���v��ZC�S�ׯ;�9�X�dCK�<7�����������}�dS`������s^����� ���:Pz��Ջ �}��������9� s�&�z���������3� ���x�����Hw���L:�����ݔ�)���� 3� �KN�.�G��s�� w�xBD{�0F�Wv���p ����E����2�× =��%/�ijAo��Y� ����!�y�%"��*+��vs{U,&b�mW: ��D��e �w������`�jpU:�:l���)_tb���<��4���6�=1 :������+�0y��
�GA� Tk�o=f��.߸���Q��T���Wc�|!|:dk�X�q�:���C����%�Y���o�� �����V � �E����������'�� ��% =�z��'��])�-��^'������+N�hK�ޭ���4
6���Ȅ����_� �M������A�H�4���� �n�)>�fR�㛬_/Y��t�9 ^�[$��F����=]*L ^w�}��h�Gߔ�\�, ��5���w����5p� 0L�،t ��C)@��(.�����w���iq��t~|h!Ԗ(��� v
��/S,�D�E{)7�e h����}��SÖ�%�w��h� 8��%(d��a�FĆ#���lc����M���t�]���I��r9eǓN�c.�4�i�I+�Wݸ�E�f������a���8@ �3PY �+��
���w�ݚ�#��ꉐ���z=_�J�"��{��(c19'� &��_��D�<�h��" ����|��Ue�%}}eYC>Ao� [� ��D8����.{J'�
�g yǠ���p���Ǜ����u�����/mh
#mf�K ��si|b���=) ��U�D��,���pW$� � X,�〜O�g&WQ�t�D�,�i%�^���@?�� ��Ӟ��P�}�ů���t@��vO.�m��� ~�_o��"�K����k�K� 8 @AM}
��%f�U'���?�֔��E��nD��S#P ؊�_*��!<�1�o�:N�X;Ö���_~�ş_�?�����z��B� P�� ��J˦���@�fPa��C^��q�`�1I�� _��� �^��,�^�7�������
�� ��ş��/3~�����!8 }`Q �R���/�5 �'g�ңV/��������,�Wu��I �ԁ��������
j�Z5W�E���,)Pxk�� �7U>��1)~�?�F?�@���S ~�4�(4Ƙ��`�C������`6Bw�cN���$<�x��0���mb�)FUj �km��Q~'U����
;~��^�9�i�&