Minor music page update

Slightly adjusted audioscope style and fixed audio playback
SKCro · Nov 16, 2023 · d0cd12b · d0cd12b
1 parent be21b81
commit d0cd12b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/Home.html b/Home.html
@@ -64,7 +64,7 @@ <h3>Welcome to WebTV HD!</h3>
         <br>It has examples of other WebTV stuff I've implemented, like checkboxes, radio buttons, text styles, and alert dialogs.
         <ul><h4 style=margin:0;>Links</h4>
           <li><a class=clickable onclick="linkHandler('1999Home.html');">1999 Home page</a> - A later revision of the home page.</li>
-          <li><a class=clickable onclick="linkHandler('Music.html');">Music</a> - Check out the audioscope!</li>
+          <li><a class=clickable onclick="linkHandler('Music.html');">Music</a> - Listen to some WebTV music and check out the audioscope!</li>
           <li><a class=clickable onclick="linkHandler('PowerOn.html');">PowerOn page</a> - This is where you started. It simulates the power-on, dialing, and splash screen sequences of a box.</li>
           <li><a class=clickable onclick="linkHandler('Credits.html');">Credits</a> - See who made this project possible!</li>
         </ul>

diff --git a/Music.html b/Music.html
@@ -31,8 +31,8 @@
   <div class=header>
     <h2 id=top>WebTV Music</h2>
     <p id=toptext>Boogie on down!</p>
-    <webtv-audioscope class=audioscope1 width=100% height=15vh bgcolor=#242424 leftoffset=-2.5% rightoffset=2.5% gain=2></webtv-audioscope>
-    <webtv-audioscope class=audioscope2 width=100% height=5vh bgcolor=#242424 leftoffset=-2.5% rightoffset=2.5% gain=0></webtv-audioscope>
+    <webtv-audioscope class=audioscope1 width=100% height=15vh bgcolor=#242424 leftoffset=-4% rightoffset=4% gain=1></webtv-audioscope>
+    <webtv-audioscope class=audioscope2 width=100% height=5vh bgcolor=#242424 gain=0></webtv-audioscope>
   </div>
   <div class=song-list>
     <h3 id=songs>Songs</h3><h4>Built In</h4>
@@ -43,7 +43,7 @@ <h3 id=songs>Songs</h3><h4>Built In</h4>
         <audio src=audio/dialing.mp3 controls></audio>
       </div>
       <div class=song-container>
-        <div class=song-title>The Modem Song (Uncompressed)</div>
+        <div class=song-title>The Modem Song<br>(Prealpha Dialing)</div>
         <div class=song-artist>Peter Drescher</div>
         <audio src=audio/music/prealphaDialing.mp3 controls></audio>
       </div>
@@ -91,6 +91,14 @@ <h4>Extras</h4>
 </div>
 
 <script>
+  document.addEventListener('play', function(e){
+    var audios = document.getElementsByTagName('audio');
+    for(var i = 0, len = audios.length; i < len;i++){
+        if(audios[i] != e.target){
+          audios[i].pause();
+        }
+    }
+  }, true);
   document.getElementById('weezer').addEventListener('play', function() {
     console.log('get weezer\'d');
     var jewel = document.querySelector('.sidebar-logo');
@@ -118,10 +126,10 @@ <h4>Extras</h4>
   if (audioscopeElements.length >= 3) {
     var thirdAudioscopeElement = audioscopeElements[2];
     if (thirdAudioscopeElement.shadowRoot) {
-        var canvas = thirdAudioscopeElement.shadowRoot.querySelector('canvas');
-        if (canvas) {
-            canvas.style.borderRadius = '0.4vw';
-        }
+      var canvas = thirdAudioscopeElement.shadowRoot.querySelector('canvas');
+      if (canvas) {
+        canvas.style.borderRadius = '0.4vw';
+      }
     }
   }
 </script>