repl.it
@swoksam54/

Music Waves

HTML, CSS, JS

A visual demonstration of sound waves and distortions of waves as well as a audio recorder with mic input, oscillator, and audio file stuff.

fork
loading
Files
  • index.html
  • example.mp3
  • favicon.ico
  • p5.js
  • p5dom.js
  • p5sound.js
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<!--
  For those curious programmers out there...
  
  This code has been created entirely by me, except for the three p5.js libraries labeled p5.js p5dom.js and p5.sound.js

  Almost all the "work" is handed in javascript and displayed on a canvas, or launched at the speed of sound from your computer (Its quite amazing what computers can do now). Feel free to explore this code; play around with some values and stuff; and comment if you have any questions or comments.

  This program is still a work in progress, in order to make it the best possible website, I need lots of people helping test for bugs and commenting suggestions to add on to my project.

  Thanks :)

  Look in style.css for information about me, and script.js for information about what I am going to do, and bugs.
-->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Musical Waves</title>

    <!-- The styling at style.css -->
    <link href="style.css" rel="stylesheet" type="text/css" />

    <link rel="icon" shref="favicon.icos"/>

    <!-- The javascript files (best one is script.js) -->
    <script src="p5.js"></script>
    <script src="p5sound.js"></script>
    <script src = "p5dom.js"></script>
    <script src = "script.js"></script>
  </head>
  <body>
    <div id = "experimentPage">
      <button id = "addOscillator">Add Oscillator</button>
      <label id = "audioLabel">Import Audio</label>
      <button id = "microphone">Microphone</button>
      <button id = "record">Record</button>
    </div>
  </body>
</html>
<!--Hi There!!-->
result
console