web app to play and mix brown, pink, and white noise. https://noise.renderorange.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 2.2KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>noise</title>
  5. <meta name="description" content="noise">
  6. <meta name="author" content="Blaine Motsinger">
  7. <style>
  8. body {
  9. background-color: rgb(233,236,239);
  10. }
  11. .players .player {
  12. float: left;
  13. padding: .5em;
  14. font-size: 7em;
  15. color: rgb(73,83,87);
  16. }
  17. .players .player i {
  18. opacity: 0.50;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="players">
  24. <div class="player">
  25. <i id="brown" class="fa fa-align-center"></i>
  26. </div>
  27. <div class="player">
  28. <i id="pink" class="fa fa-align-center"></i>
  29. </div>
  30. <div class="player">
  31. <i id="white" class="fa fa-align-center"></i>
  32. </div>
  33. </div>
  34. <script src="js/fa.0eb6876c11.js"></script>
  35. <script src="js/howler.2.1.2.min.js"></script>
  36. <script src="js/jquery.3.4.1.min.js"></script>
  37. <script>
  38. const brown = new Howl({
  39. src: [ "assets/brownnoise.mp3" ],
  40. loop: true,
  41. });
  42. const pink = new Howl({
  43. src: [ "assets/pinknoise.mp3" ],
  44. loop: true,
  45. });
  46. const white = new Howl({
  47. src: [ "assets/whitenoise.mp3" ],
  48. loop: true,
  49. });
  50. $( "#brown" ).on( "click", function() {
  51. if ( brown.playing() ) {
  52. $( "#brown" ).fadeTo( 400, 0.50 );
  53. brown.pause();
  54. }
  55. else {
  56. $( "#brown" ).fadeTo( 400, 1 );
  57. brown.play();
  58. }
  59. });
  60. $( "#pink" ).on( "click", function() {
  61. if ( pink.playing() ) {
  62. $( "#pink" ).fadeTo( 400, 0.50 );
  63. pink.pause();
  64. }
  65. else {
  66. $( "#pink" ).fadeTo( 400, 1 );
  67. pink.play();
  68. }
  69. });
  70. $( "#white" ).on( "click", function() {
  71. if ( white.playing() ) {
  72. $( "#white" ).fadeTo( 400, 0.50 );
  73. white.pause();
  74. }
  75. else {
  76. $( "#white" ).fadeTo( 400, 1 );
  77. white.play();
  78. }
  79. });
  80. </script>
  81. </body>
  82. </html>