diff --git a/radio-player/index.html b/radio-player/index.html
deleted file mode 100644
index db330ac..0000000
--- a/radio-player/index.html
+++ /dev/null
@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <title>BBC Radio Relay</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- Add the Bootstrap-Nightfall Variant CSS (the media attribute is for dark auto-switching) -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightfall.min.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-    <meta http-equiv="Pragma" content="no-cache" />
-    <meta http-equiv="Expires" content="0" />
-
-</head>
-
-<body>
-  <div class="container-sm mt-3">
-    <h2 class="text-center">BBC Radio Relay</h2>
-
-    <ul class="nav justify-content-center">
-    
-      <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Pacific</a>
-      <ul class="dropdown-menu">
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_one-8.html"><img src="/media/radio_one/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_two-8.html"><img src="/media/radio_two/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_three-8.html"><img src="/media/radio_three/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_fourfm-8.html"><img src="/media/radio_fourfm/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_five_live-8.html"><img src="/media/radio_five_live/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/6music-8.html"><img src="/media/6music/1920x1080.png" width="112"></a></li>
-        
-      </ul>
-            
-      <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Mountain</a>
-      <ul class="dropdown-menu">
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_one-7.html"><img src="/media/radio_one/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_two-7.html"><img src="/media/radio_two/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_three-7.html"><img src="/media/radio_three/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_fourfm-7.html"><img src="/media/radio_fourfm/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_five_live-7.html"><img src="/media/radio_five_live/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/6music-7.html"><img src="/media/6music/1920x1080.png" width="112"></a></li>
-        
-      </ul>
-            
-      <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Central</a>
-      <ul class="dropdown-menu">
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_one-6.html"><img src="/media/radio_one/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_two-6.html"><img src="/media/radio_two/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_three-6.html"><img src="/media/radio_three/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_fourfm-6.html"><img src="/media/radio_fourfm/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_five_live-6.html"><img src="/media/radio_five_live/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/6music-6.html"><img src="/media/6music/1920x1080.png" width="112"></a></li>
-        
-      </ul>
-            
-      <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Eastern</a>
-      <ul class="dropdown-menu">
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_one-5.html"><img src="/media/radio_one/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_two-5.html"><img src="/media/radio_two/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_three-5.html"><img src="/media/radio_three/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_fourfm-5.html"><img src="/media/radio_fourfm/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_five_live-5.html"><img src="/media/radio_five_live/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/6music-5.html"><img src="/media/6music/1920x1080.png" width="112"></a></li>
-        
-      </ul>
-            
-      <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Atlantic</a>
-      <ul class="dropdown-menu">
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_one-4.html"><img src="/media/radio_one/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_two-4.html"><img src="/media/radio_two/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_three-4.html"><img src="/media/radio_three/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_fourfm-4.html"><img src="/media/radio_fourfm/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/radio_five_live-4.html"><img src="/media/radio_five_live/1920x1080.png" width="112"></a></li>
-         
-        <li class="text-center"><a class="dropdown-item" href="/stations/6music-4.html"><img src="/media/6music/1920x1080.png" width="112"></a></li>
-        
-      </ul>
-            
-                
-      </li>
-    </ul>
-  </div>
-</body>
-
-<div class="d-flex justify-content-center align-items-center mt-3">
-
-<div class="card mx-auto" style="width: 24rem;">
-  
-    <div class="alert alert-primary" role="alert">
-      <h4 class="alert-heading">What is this?!</h4>
-      <p>Time-delayed BBC Radio for the Americas. Choose a timezone and station above to listen! It works on desktop and Android (see note below).</p>
-    </div>
-
-    <div class="alert alert-dark" role="alert">
-      <h4 class="alert-heading"></h4>
-      <p>The Dark Reader browser extension may conflict with my Dark Mode - try disabling it.</p>
-    </div>
-    
-    <div class="alert alert-warning" role="alert">
-      <h4 class="alert-heading">Mobile Users</h4>
-      <p>You will need to open the stream in an external app like VLC until I find a workaround for the audio preloading restriction in iOS. Android has fewer issues with this. See a <a href="http://marcokstephen.github.io/mobileguide.html" class="alert-link">detailed guide here.</a></p>
-    </div>
-
-  </div>
-</div>
-
-</div>
-
-<footer>
-
-<div class="d-flex justify-content-center align-items-center mt-5">
-
-  <a href="https://github.com/zenodotus280/BBC-Radio-Relay">
-    <img src="/media/github-mark-white.png" alt="GitHub" width="35px" class="mr-2"/><small>   Check out the project on GitHub.</small></a>
-
-</div>
-
-</footer>
-
-</html>
\ No newline at end of file
diff --git a/radio-player/media/radio-static-2.mp3 b/radio-player/media/radio-static-2.mp3
new file mode 100644
index 0000000..ba15058
Binary files /dev/null and b/radio-player/media/radio-static-2.mp3 differ
diff --git a/radio-player/media/radio-static.mp3 b/radio-player/media/radio-static.mp3
new file mode 100644
index 0000000..b7c008e
Binary files /dev/null and b/radio-player/media/radio-static.mp3 differ
diff --git a/radio-player/stations/style.css b/radio-player/stations/style.css
new file mode 100644
index 0000000..4abbac0
--- /dev/null
+++ b/radio-player/stations/style.css
@@ -0,0 +1,45 @@
+    .logo {
+        box-shadow: 1px 1px 0px 0px black, 2px 2px 0px 0px black, 3px 3px 0px 0px black, 4px 4px 0px 0px black, 5px 5px 0px 0px black;
+        border: 3px solid black;
+    }
+
+    .button-raised {
+        font-family: "Open Sans", sans-serif;
+        font-weight: bold;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background-color: lightgrey;
+        text-decoration: none;
+        text-transform: uppercase;
+        color: #000;
+        cursor: pointer;
+        border: 3px solid;
+        padding: 0.25em 0.5em;
+        margin: 5px;
+        box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
+        position: relative;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    .button-raised:active {
+        box-shadow: 0px 0px 0px 0px;
+        top: 5px;
+        left: 5px;
+    }
+
+    .button-raised:disabled {
+        pointer-events: none;
+        background-color: chocolate;
+    }
+
+    .button-raised-mute.muted {
+        background-color: darkred;
+    }
+
+    /* CSS for hiding the alert initially */
+#player-alert {
+    display: none;
+  }
+  
\ No newline at end of file
diff --git a/radio-player/templates/_footer.j2 b/radio-player/templates/_footer.j2
index eb934ca..d2231bf 100644
--- a/radio-player/templates/_footer.j2
+++ b/radio-player/templates/_footer.j2
@@ -3,7 +3,7 @@
 <div class="d-flex justify-content-center align-items-center mt-5">
 
   <a href="https://github.com/zenodotus280/BBC-Radio-Relay">
-    <img src="/media/github-mark-white.png" alt="GitHub" width="35px" class="mr-2"/><small>   Check out the project on GitHub.</small></a>
+    <img src="/media/github-mark-white.png" alt="GitHub" width="35px" class="mr-2"/></a>
 
 </div>
 
diff --git a/radio-player/templates/_home.j2 b/radio-player/templates/_home.j2
index 2d6a52c..fc8038f 100644
--- a/radio-player/templates/_home.j2
+++ b/radio-player/templates/_home.j2
@@ -4,14 +4,9 @@
   
     <div class="alert alert-primary" role="alert">
       <h4 class="alert-heading">What is this?!</h4>
-      <p>Time-delayed BBC Radio for the Americas. Choose a timezone and station above to listen! It works on desktop and Android (see note below).</p>
+      <p>Time-delayed BBC Radio for the Americas. Choose a timezone and station above to listen! It works on desktop and Android (see note below). You can click/tap the logo when the audio is loaded to copy the direct URL.</p>
     </div>
-
-    <div class="alert alert-dark" role="alert">
-      <h4 class="alert-heading"></h4>
-      <p>The Dark Reader browser extension may conflict with my Dark Mode - try disabling it.</p>
-    </div>
-    
+   
     <div class="alert alert-warning" role="alert">
       <h4 class="alert-heading">Mobile Users</h4>
       <p>You will need to open the stream in an external app like VLC until I find a workaround for the audio preloading restriction in iOS. Android has fewer issues with this. See a <a href="http://marcokstephen.github.io/mobileguide.html" class="alert-link">detailed guide here.</a></p>
diff --git a/radio-player/templates/_station.j2 b/radio-player/templates/_station.j2
index aa06b03..f672916 100644
--- a/radio-player/templates/_station.j2
+++ b/radio-player/templates/_station.j2
@@ -1,108 +1,129 @@
-<style>
-    .logo {
-        box-shadow: 1px 1px 0px 0px black, 2px 2px 0px 0px black, 3px 3px 0px 0px black, 4px 4px 0px 0px black, 5px 5px 0px 0px black;
-        border: 3px solid black;
-    }
-
-    .button-raised {
-        font-family: "Open Sans", sans-serif;
-        font-weight: bold;
-        font-size: 16px;
-        letter-spacing: 2px;
-        background-color: lightgrey;
-        text-decoration: none;
-        text-transform: uppercase;
-        color: #000;
-        cursor: pointer;
-        border: 3px solid;
-        padding: 0.25em 0.5em;
-        margin: 5px;
-        box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
-        position: relative;
-        user-select: none;
-        -webkit-user-select: none;
-        touch-action: manipulation;
-    }
-
-    .button-raised:active {
-        box-shadow: 0px 0px 0px 0px;
-        top: 5px;
-        left: 5px;
-    }
-
-    .button-raised:disabled {
-        pointer-events: none;
-        background-color: chocolate;
-    }
+<link rel="stylesheet" href="style.css">
+
+<div class="d-flex justify-content-center align-items-center mt-3">
+  <div id="player-warning" style="display:none;" class="alert alert-warning " role="alert">
+    <small id="player-src1" class="player-src1"></p>
+  </div>
+  <div id="player-error" style="display:none;" class="alert alert-danger " role="alert">
+    <small id="player-src2" class="player-src2"></p>
+  </div>
+</div>
+<div class="d-flex justify-content-center align-items-center mt-3">
+    <a id="logo-link" href="#">
+        <img class="logo" src="../media/{{ station.stn_name }}/128x128.png">
+    </a>
+</div>
+<div class="d-flex justify-content-center align-items-center mt-3">
+    <audio id="player" volume="0.5" preload="auto" playsinline></audio>
+    <button id="vol_minus" class="button-raised vol_con" style="display: none" role="button">−</button>
+    <button class="button-raised button-raised-mute vol_con" style="display: none" role="button">Mute</button>
+    <button id="vol_plus" class="button-raised vol_con" style="display: none" role="button">+</button>
+    <button id="start-button" class="button-raised" role="button" style="display: none;">Tune in!</button>
+    <button id="loading-button" class="button-raised" role="button" style="background-color: chocolate;" disabled>Loading . . .</button>
+</div>
 
-    .button-raised-mute.muted {
-        background-color: darkred;
+<script>
+// DOMContentLoaded event handler
+document.addEventListener('DOMContentLoaded', function() {
+  var player = document.getElementById('player');
+  var volMinusBtn = document.getElementById('vol_minus');
+  var muteBtn = document.querySelector('.button-raised-mute');
+  var volPlusBtn = document.getElementById('vol_plus');
+  var startBtn = document.getElementById('start-button');
+  var loadingBtn = document.getElementById('loading-button');
+  var logoLink = document.getElementById('logo-link');
+
+  var firstSource = location.origin + ":8080/{{ station.stn_name }}/{{ station.tz_offset }}";
+  var secondSource = "https://bbcradiorelay.net:8443/{{ station.stn_name }}/{{ station.tz_offset }}";
+  var thirdSource = "http://bbcradiorelay.net:8080/{{ station.stn_name }}/{{ station.tz_offset }}";
+  var localSource = '../media/radio-static-2.mp3';
+  
+  var sources = [firstSource, secondSource, thirdSource]; // Array of sources to try
+  
+  var sourceIndex = 0;
+  
+  function loadNextSource() {
+    player.src = sources[sourceIndex];
+    player.load();
+    player.addEventListener('error', handleSourceError);
+  }
+  
+function handleSourceError() {
+  player.removeEventListener('error', handleSourceError); // Remove the event listener
+  sourceIndex++;
+  if (sourceIndex < sources.length) {
+    loadNextSource();
+  } else {
+    player.src = localSource;
+    player.volume = 0.1; // Set volume to 0.1 for mp3 fallback
+    player.loop = true; // Enable loop for mp3 fallback
+    player.play();
+    //loadingBtn.style.display = 'none';
+    //startBtn.style.display = 'block';
+    document.getElementById('player-src2').textContent = 'No valid audio source was found.';
+    document.getElementById('player-error').style.display = 'block';
+  }
+};
+
+loadNextSource();
+
+loadingBtn.style.display = 'block';
+
+// 'canplaythrough' event handler
+player.addEventListener('canplaythrough', function() {
+  setTimeout(function() {
+    startBtn.style.display = 'block';
+    loadingBtn.style.display = 'none';
+    if (sourceIndex === 1) {
+      document.getElementById('player-src1').textContent = 'Second Audio Source Used: ' + player.src;
+      document.getElementById('player-warning').style.display = 'block';
+    } else if (sourceIndex === 2) {
+      document.getElementById('player-src1').textContent = 'Third Audio Source Used: ' + player.src;
+      document.getElementById('player-warning').style.display = 'block';
     }
+    player.removeEventListener('error', handleSourceError); // Remove the event listener after 'canplaythrough' event
+  }, 0);
+});
+
+    // 'click' event handler for start button
+    startBtn.addEventListener('click', function() {
+        player.play();
+        document.querySelectorAll('.vol_con').forEach(function(element) {
+            element.style.display = 'block';
+        });
+        this.style.display = 'none';
+    });
 
-    .button-raised-mute:not(.muted) {}
-</style>
-
-<div class="container">
-
-
-
-    <div class="d-flex justify-content-center align-items-center mt-3">
-        <div><img class="logo" src="../media/{{ station.stn_name }}/128x128.png"></div>
-    </div>
-    <div class="d-flex justify-content-center align-items-center mt-3">
-        <audio id="player" volume="0.5"
-            preload="auto" playsinline></audio>
-        <script>
-            var player = document.getElementById("player");
-            player.src = location.origin + ":8080/{{ station.stn_name }}/{{ station.tz_offset }}";
-        </script>
-
-        <button id="vol_minus" class="button-raised vol_con" style="display: none" role="button" onclick="
-        var player = document.getElementById('player');
-        player.volume -= 0.1;
-    ">−</button>
+    // 'click' event handler for volume minus button
+    volMinusBtn.addEventListener('click', function() {
+        player.volume = Math.max(0.1, player.volume - 0.1);
+    });
 
-        <button class="button-raised button-raised-mute vol_con" style="display: none" role="button" onclick="
-      var player = document.getElementById('player');
+    // 'click' event handler for mute button
+    muteBtn.addEventListener('click', function() {
         player.muted = !player.muted;
         if (player.muted) {
             this.classList.add('muted');
         } else {
             this.classList.remove('muted');
-        }      
-    ">Mute</button>
-
-        <button id="vol_plus" class="button-raised vol_con" style="display: none" role="button" onclick="
-        var player = document.getElementById('player');
-        player.volume += 0.1;
-    ">+</button>
-
-<button id="start-button" class="button-raised" role="button" style="display: none;">Tune in!</button>
-<button id="loading-button" class="button-raised" role="button" style="background-color: chocolate;" disabled>Loading . . .</button>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        document.getElementById('loading-button').style.display = 'block';
+        }
+    });
 
-        var player = document.getElementById('player');
-        player.addEventListener('canplaythrough', function() {
-            setTimeout(function() {
-                document.getElementById('start-button').style.display = 'block';
-                document.getElementById('loading-button').style.display = 'none';
-            }, 0);
-        });
+    // 'click' event handler for volume plus button
+    volPlusBtn.addEventListener('click', function() {
+        player.volume = Math.min(1, player.volume + 0.1);
+    });
 
-        document.getElementById('start-button').addEventListener('click', function() {
-            player.play();
-            document.querySelectorAll('.vol_con').forEach(function(element) {
-                element.style.display = 'block';
+    // 'click' event handler for logo link
+    logoLink.addEventListener('click', function(event) {
+        event.preventDefault();
+        navigator.clipboard.writeText(player.src)
+            .then(function() {
+                alert('Audio source URL copied to clipboard!');
+            })
+            .catch(function(error) {
+                console.error('Failed to copy audio source URL to clipboard:', error);
             });
-            this.style.display = 'none';
-        });
     });
-</script>
-
-    </div>
-</div>
-</div>
-</div>
\ No newline at end of file
+});
+</script>
\ No newline at end of file
