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 4.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>noise</title>
  5. <meta name="description" content="web app to play and mix brown, pink, and white noise.">
  6. <meta name="author" content="Blaine Motsinger">
  7. <style>
  8. body {
  9. background-color: rgb(233,236,239);
  10. }
  11. .players .player {
  12. width: 1em;
  13. height: 1.25em;
  14. float: left;
  15. padding: .5em;
  16. font-size: 7em;
  17. color: rgb(73,83,87);
  18. }
  19. .players .player input, .players .player i {
  20. display: block;
  21. margin: auto;
  22. opacity: 0.50;
  23. }
  24. .players .player i {
  25. width: 88%;
  26. }
  27. .players .player input {
  28. width: 92%;
  29. display: none;
  30. padding-top: 4em;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="players">
  36. <div class="player" id="brown">
  37. <i class="fa fa-align-center"></i>
  38. <input type="range" min="0" max="100" step="1"></input>
  39. </div>
  40. <div class="player" id="pink">
  41. <i class="fa fa-align-center"></i>
  42. <input type="range" min="0" max="100" step="1"></input>
  43. </div>
  44. <div class="player" id="white">
  45. <i class="fa fa-align-center"></i>
  46. <input type="range" min="0" max="100" step="1"></input>
  47. </div>
  48. </div>
  49. <div class="controls">
  50. <div id="mute_all">
  51. <i class="fas fa-volume-up"></i>
  52. </div>
  53. </div>
  54. <script src="js/fa.0eb6876c11.js"></script>
  55. <script src="js/howler.2.1.2.min.js"></script>
  56. <script src="js/jquery.3.4.1.min.js"></script>
  57. <script>
  58. const brown = new Howl({
  59. src: [ "assets/brownnoise.mp3" ],
  60. loop: true,
  61. });
  62. const pink = new Howl({
  63. src: [ "assets/pinknoise.mp3" ],
  64. loop: true,
  65. });
  66. const white = new Howl({
  67. src: [ "assets/whitenoise.mp3" ],
  68. loop: true,
  69. });
  70. const fade_speed = 200;
  71. const opacity_thin = 0.50;
  72. const opacity_none = 1;
  73. // audio play/pause and visual updates
  74. $( "#brown > i" ).on( "click", function() {
  75. if ( brown.playing() ) {
  76. $( "#brown > i" ).fadeTo( fade_speed, opacity_thin );
  77. $( "#brown > input" ).css( "display", "none" );
  78. brown.pause();
  79. }
  80. else {
  81. $( "#brown > i" ).fadeTo( fade_speed, opacity_none );
  82. $( "#brown > input" ).css( "display", "block" );
  83. brown.play();
  84. }
  85. });
  86. $( "#pink > i" ).on( "click", function() {
  87. if ( pink.playing() ) {
  88. $( "#pink > i" ).fadeTo( fade_speed, opacity_thin );
  89. $( "#pink > input" ).css( "display", "none" );
  90. pink.pause();
  91. }
  92. else {
  93. $( "#pink > i" ).fadeTo( fade_speed, opacity_none );
  94. $( "#pink > input" ).css( "display", "block" );
  95. pink.play();
  96. }
  97. });
  98. $( "#white > i" ).on( "click", function() {
  99. if ( white.playing() ) {
  100. $( "#white > i" ).fadeTo( fade_speed, opacity_thin );
  101. $( "#white > input" ).css( "display", "none" );
  102. white.pause();
  103. }
  104. else {
  105. $( "#white > i" ).fadeTo( fade_speed, opacity_none );
  106. $( "#white > input" ).css( "display", "block" );
  107. white.play();
  108. }
  109. });
  110. // volume control
  111. // set the howler volumes to the slider values on page load.
  112. // if the page is refreshed the sliders hold their previous value,
  113. // but howler always initializes the values at 100%.
  114. // this ensures the values match on page load.
  115. $( function() {
  116. brown.volume( $( "#brown > input" ).val() * .01 );
  117. pink.volume( $( "#pink > input" ).val() * .01 );
  118. white.volume( $( "#white > input" ).val() * .01 );
  119. });
  120. // set howler volumes to the slider changes.
  121. // range for the input value is 0-100, howler is 0.0-1.0.
  122. // convert to match.
  123. $( "#brown > input" ).on( "input", function() {
  124. brown.volume( $( "#brown > input" ).val() * .01 );
  125. });
  126. $( "#pink > input" ).on( "input", function() {
  127. pink.volume( $( "#pink > input" ).val() * .01 );
  128. });
  129. $( "#white > input" ).on( "input", function() {
  130. white.volume( $( "#white > input" ).val() * .01 );
  131. });
  132. // mute controls
  133. $( "#mute_all" ).on( "click", function() {
  134. if ( white.playing() ) {
  135. $( "#mute_all" ).fadeTo( fade_speed, opacity_thin );
  136. white.pause();
  137. }
  138. else {
  139. $( "#mute_all" ).fadeTo( fade_speed, opacity_none );
  140. white.play();
  141. }
  142. });
  143. </script>
  144. </body>
  145. </html>