Fix HLS playback on Safari

DoNotSpamPls · Dec 16, 2024 · d092db8 · d092db8
1 parent 8f4b918
commit d092db8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -8,23 +8,13 @@
     <link rel="shortcut icon" href="favicon.ico" />
 
     <!-- CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="radios.css" rel="stylesheet">
 
     <!-- JS -->
-    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.0.7/hls.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js" integrity="sha512-iFmKfXPRVIW5PBZ3gzXSLz/IYtC6BMsIqmY/K42iuykOoUZTChDwR6KYhPcwj5HuE4hNJhZxNPD+ZdHLJvRv8A==" crossorigin="anonymous"></script>
     <script src="radios.js"></script>
-
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YVRLT75E6E"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'G-YVRLT75E6E');
-    </script>
   </head>
 
   <body class="text-center">
@@ -52,7 +42,6 @@ <h1 class="h3 mb-3 font-weight-normal">Радио плейър</h1>
           <label>Сила на звука</label>
           <input type="range" min="0" max="100" value="50" class="slider" id="slider">
         </div>
-        <label class="p-4"><b>ВАЖНО!</b> Днес Ванката черпи 😊</label>
       </form>
   </body>
 </html>
diff --git a/radios.js b/radios.js
@@ -15,35 +15,44 @@ var radios = [
     "https://radio.rn-tv.com:8000/stream/1/" // Мая
 ]
 
-var hls = null;
+var hls = new Hls({
+    maxMaxBufferLength: 30,
+    backBufferLength: 0,
+});
 var audioElement = document.createElement('audio');
 
+function setupHLSPlayback(hls, hlsUrl) {
+    const supportHLS = Boolean(audioElement.canPlayType("application/vnd.apple.mpegurl"));
+    if (supportHLS) {
+      audioElement.src = hlsUrl;
+    } else {
+      hls.loadSource(hlsUrl);
+      hls.attachMedia(audioElement);
+  }
+}
+
 $(document).ready(function(){
     $("select").change(function(){
         // име на избраното радио
         var radioname = $('#radios option:selected').val();
 
         audioElement.pause();
         if (hls != null) { hls.stopLoad(); hls.detachMedia(); }
-        hls = new Hls({
-            maxMaxBufferLength: 30,
-            backBufferLength: 0,
-        });
 
         switch(radioname) {
-            case "БНР Хоризонт": audioElement.setAttribute('src', ""); hls.loadSource(radios[0]); hls.attachMedia(audioElement); break;
-            case "БНР Шумен": audioElement.setAttribute('src', ""); hls.loadSource(radios[1]); hls.attachMedia(audioElement); break;
-            case "Радио 1": audioElement.setAttribute('src', radios[2]); break;
-            case "Радио 1 Рок": audioElement.setAttribute('src', radios[3]); break;
-            case "БГ Радио": audioElement.setAttribute('src', radios[4]); break;
-            case "Вероника": audioElement.setAttribute('src', radios[5]); break;
-            case "Веселина": audioElement.setAttribute('src', ""); hls.loadSource(radios[6]); hls.attachMedia(audioElement); break;
-            case "The Voice": audioElement.setAttribute('src', ""); hls.loadSource(radios[7]); hls.attachMedia(audioElement); break;
-            case "Energy": audioElement.setAttribute('src', radios[8]); break;
-            case "N-Joy": audioElement.setAttribute('src', radios[9]); break;
-            case "City": audioElement.setAttribute('src', radios[10]); break;
-            case "Fresh!": audioElement.setAttribute('src', radios[11]); break;
-            case "Мая": audioElement.setAttribute('src', radios[12]); break;
+            case "БНР Хоризонт": audioElement.src = ""; setupHLSPlayback(hls, radios[0]); break;
+            case "БНР Шумен": audioElement.src = ""; setupHLSPlayback(hls, radios[1]); break;
+            case "Радио 1": audioElement.src = radios[2]; break;
+            case "Радио 1 Рок": audioElement.src = radios[3]; break;
+            case "БГ Радио": audioElement.src = radios[4]; break;
+            case "Вероника": audioElement.src = radios[5]; break;
+            case "Веселина": audioElement.src = ""; setupHLSPlayback(hls, radios[6]); break;
+            case "The Voice": audioElement.src = ""; setupHLSPlayback(hls, radios[7]); break;
+            case "Energy": audioElement.src = radios[8]; break;
+            case "N-Joy": audioElement.src = radios[9]; break;
+            case "City": audioElement.src = radios[10]; break;
+            case "Fresh!": audioElement.src = radios[11]; break;
+            case "Мая": audioElement.src = radios[12]; break;
             // Радиото не е в списъка (не би трябвало да се случва)
             default: alert("Грешка!");
         }