From bda82375f87c5ff347bb4e2a6e8c9f461c6956a0 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 18 Oct 2024 16:21:06 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E6=9C=AC=E9=A1=B5hls=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.tsx  | 29 ++++++++++---------
 src/pages/listen.tsx | 66 +++++++++++++++++++++++++++++---------------
 2 files changed, 58 insertions(+), 37 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ca6252f..78be012 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -150,21 +150,21 @@ export default function HomePage() {
       if (currentTime !== 0) {
         if(isFirst){
           if (supprtHls) {
-          const hls = new HLS.default(); // 使用 HLS.js
-          console.log('加载HLS流地址=>', testMusic)
-          hls.attachMedia(audio); // 关联 media 元素
-          hls.loadSource(testMusic); // 加载 HLS 流地址
-          hls.on(HLS.Events.MANIFEST_PARSED, function () {
-            audio.currentTime = currentTime
+            const hls = new HLS.default(); // 使用 HLS.js
+            console.log('加载HLS流地址=>', testMusic)
+            hls.attachMedia(audio); // 关联 media 元素
+            hls.loadSource(testMusic); // 加载 HLS 流地址
+            hls.on(HLS.Events.MANIFEST_PARSED, function () {
+              audio.currentTime = currentTime
+              audio.play()
+              setisFirst(false)
+            });
+          } else {
+            // 直接使用原生HLS支持
+            audio.src = testMusic
             audio.play()
             setisFirst(false)
-          });
-        } else {
-          // 直接使用原生HLS支持
-          audio.src = testMusic
-          audio.play()
-          setisFirst(false)
-        }
+          }
         }else{
           audio.play()
           console.log('继续播放')
@@ -364,12 +364,11 @@ export default function HomePage() {
         </ConfigProvider>
         
         <audio ref={audioRef} loop={!!playMode} playsInline>
-          <source src="" type="audio/mpeg"></source>
+          <source type="audio/mpeg"></source>
         </audio>
 
         <video ref={videoRef} className='video_ref' loop={!!playMode} playsInline>
           <source type='application/x-mpegURL' />
-          Your browser does not support the video tag.
         </video>
         
         <div className='audio_progress_time_bar'>
diff --git a/src/pages/listen.tsx b/src/pages/listen.tsx
index 712d61a..d45d495 100644
--- a/src/pages/listen.tsx
+++ b/src/pages/listen.tsx
@@ -12,8 +12,11 @@ export default function HomePage() {
 
   const location = useLocation()
 
+  const audioRef = useRef<any>(null);
   const videoRef = useRef<any>(null);
 
+  const supprtHls = HLS.isSupported() // 是否支持hls，不支持的则用video原生播放，支持的就用hls.js
+
   const [testMusic, settestMusic] = useState("https://alihls.jm-kid.com/6b46fb4068b471ee803f6723b78e0102/fabee8a31fff0477f788beee1ac8901c-ld-encrypt-stream.m3u8")
 
   const [MusicDesc, setMusicDesc] = useState<any>({})
@@ -138,35 +141,46 @@ export default function HomePage() {
       setcurrentTime(0)
     }
 
-    const audio = videoRef.current;
+    const audio = supprtHls ? audioRef.current : videoRef.current
 
     if(isPlay){
       if(currentTime !== 0){
         if(isFirst){
-          console.log('第一次播放')
-          const hls = new HLS.default(); // 使用 HLS.js
-          console.log('加载HLS流地址=>', testMusic)
-          hls.loadSource(testMusic); // 加载 HLS 流地址
-          hls.attachMedia(audio); // 关联 media 元素
-          hls.on(HLS.Events.MANIFEST_PARSED, function() {
-            audio.currentTime = currentTime
+          if (supprtHls) {
+            const hls = new HLS.default(); // 使用 HLS.js
+            console.log('加载HLS流地址=>', testMusic)
+            hls.attachMedia(audio); // 关联 media 元素
+            hls.loadSource(testMusic); // 加载 HLS 流地址
+            hls.on(HLS.Events.MANIFEST_PARSED, function () {
+              audio.currentTime = currentTime
+              audio.play()
+              setisFirst(false)
+            });
+          } else {
+            // 直接使用原生HLS支持
+            audio.src = testMusic
             audio.play()
             setisFirst(false)
-          });
+          }
         }else{
           audio.play()
           console.log('继续播放')
         }
       }else{
-        console.log('从头播放')
-        const hls = new HLS.default(); // 使用 HLS.js
-        console.log('加载HLS流地址=>', testMusic)
-        hls.loadSource(testMusic); // 加载 HLS 流地址
-        hls.attachMedia(audio); // 关联 media 元素
-        hls.on(HLS.Events.MANIFEST_PARSED, function() {
-          audio.play(); // 开始播放
+        if (supprtHls) {
+          const hls = new HLS.default(); // 使用 HLS.js
+          hls.attachMedia(audio); // 关联 media 元素
+          hls.loadSource(testMusic); // 加载 HLS 流地址
+          hls.on(HLS.Events.MANIFEST_PARSED, function () {
+            audio.play(); // 开始播放
+            setisFirst(false)
+          });
+        } else {
+          // 直接使用原生HLS支持
+          audio.src = testMusic
+          audio.play()
           setisFirst(false)
-        });
+        }
       }
       
     }else{
@@ -235,7 +249,7 @@ export default function HomePage() {
   }, [listIndex])
 
   useEffect(() => {
-    const audio = videoRef.current
+    const audio = supprtHls ? audioRef.current : videoRef.current
     if (audio) {
       audio.addEventListener('timeupdate', timeupdateHandle)
       audio.addEventListener('pause', timeupdateHandle)
@@ -261,12 +275,14 @@ export default function HomePage() {
       }else{
         setlistIndex(0)
       }
-      videoRef.current.currentTime = 0
+      const audio = supprtHls ? audioRef.current : videoRef.current
+      audio.currentTime = 0
     }
   }
   
   const timeupdateHandle = () => {
-    setcurrentTime(videoRef.current.currentTime)
+    const audio = supprtHls ? audioRef.current : videoRef.current
+    setcurrentTime(audio.currentTime)
   }
   
   const playHandle = () => {
@@ -326,13 +342,19 @@ export default function HomePage() {
             }}
             onChangeComplete={(currentTime)=>{
               console.log('拖拽结束', currentTime)
-              const audio = videoRef.current
+              const audio = supprtHls ? audioRef.current : videoRef.current
               audio.currentTime = currentTime
             }}
           />
         </ConfigProvider>
         
-        <audio ref={videoRef} loop={!!playMode} playsInline></audio>
+        <audio ref={audioRef} loop={!!playMode} playsInline>
+          <source type="audio/mpeg"></source>
+        </audio>
+
+        <video ref={videoRef} className='video_ref' loop={!!playMode} playsInline>
+          <source type='application/x-mpegURL' />
+        </video>
         
         <div className='audio_progress_time_bar'>
           <div