熏听页hls兼容

src/pages/index.less

@@ -139,6 +139,9 @@
     flex-direction: column;
   }
 }
+.video_ref {
+  display: none;
+}
 
 @keyframes spin {
   from {

src/pages/index.tsx

@@ -11,9 +11,14 @@ import RgupHalfScreen from '@/components/rgup';
 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 [errTip, setErrTip] = useState('')
+
   const [testMusic, settestMusic] = useState("https://alihls.jm-kid.com/6b46fb4068b471ee803f6723b78e0102/fabee8a31fff0477f788beee1ac8901c-ld-encrypt-stream.m3u8")
 
   const [MusicDesc, setMusicDesc] = useState<any>({})
@@ -139,37 +144,47 @@ 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('第一次播放')
+          if (supprtHls) {
           const hls = new HLS.default(); // 使用 HLS.js
           console.log('加载HLS流地址=>', testMusic)
-          hls.loadSource(testMusic); // 加载 HLS 流地址
           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(); // 开始播放
+      } else {
+        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{
       audio.pause()
     }
@@ -235,7 +250,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 +276,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 = () => {
@@ -277,6 +294,16 @@ export default function HomePage() {
     setisShowList(true)
   }
 
+  // const playNew = () => {
+  //   const hls = new HLS.default(); // 使用 HLS.js
+  //         console.log('加载HLS流地址=>', testMusic)
+  //         hls.loadSource(testMusic); // 加载 HLS 流地址
+  //   hls.attachMedia(audioRef.current); // 关联 media 元素
+    
+  //   console.log(33,videoRef1.current.play)
+  //   audioRef.current.play()
+  // }
+
   return (
     <div className='audioItfc_bg'>
       <div 
@@ -286,6 +313,10 @@ export default function HomePage() {
         <div className='audio_disc_bearing'></div>
       </div>
       
+    {/* <audio ref={videoRef1} controls>
+      <source src="https://alivod.jimeikid.com/sv/3e516a3e-191bb3c3cd6/3e516a3e-191bb3c3cd6.mp3" type="audio/mpeg"></source>
+      </audio> */}
+      
       <div className='audio_progress_bar'>
         <div className="audio_title_wrap">
           <div className='audio_title'>{MusicDesc.PrdtTitle}</div>
@@ -326,13 +357,20 @@ 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 src="" 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'>
           <div 
@@ -371,6 +409,12 @@ export default function HomePage() {
             src={isPlay ? 'https://oss.jm-kid.com/wx_5colorflower/pauseMusic.png' : 'https://oss.jm-kid.com/wx_5colorflower/playMusic.png'}
             onClick={() => setisPlay(!isPlay)}
           ></img>
+          {/* <img 
+            className='audio_operate_btn1'
+            src={isPlay ? 'https://oss.jm-kid.com/wx_5colorflower/pauseMusic.png' : 'https://oss.jm-kid.com/wx_5colorflower/playMusic.png'}
+            onClick={playNew}
+          ></img> */}
+
           <img 
             className='audio_operate_btn0'
             src='https://oss.jm-kid.com/wx_5colorflower/assets/next.png'

src/pages/listen.tsx

@@ -105,7 +105,6 @@ export default function HomePage() {
     }).then((res:any) => {
       console.log('产品音频列表获取成功=>', res.data)
       setmusicList(res.data.data.StoryResource)
-
       setlistIndex(0)
     })
   }, [])
@@ -176,53 +175,62 @@ export default function HomePage() {
   }, [isPlay])
 
   useEffect(()=>{
-    console.log('切换音频', listIndex, musicList)
     if(listIndex !== -1 && musicList.length > 0){
+      console.log('切换音频', listIndex)
       played && setisPlay(false)
-      //判断播放方式
-      if(musicList[listIndex].PlayType === 'url'){
-        const mDesc = {
-          PrdtTitle: musicList[listIndex].ResTitle,
-          PrdtCover: musicList[listIndex].ResCover,
-        }
-        setMusicDesc(mDesc)
-        settestMusic(musicList[listIndex].PlayUrl)
-        setdurantionTime(musicList[listIndex].ResDuration)
-        setisFirst(true)
-        setcurrentTime(0)
-        played && setisPlay(true)
-      }else{
-        //app request for video resource
-        axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', {
-          "password": "WxBmGKupbl30+v4hfQC8aQ==",
-          "userName": "VqwgIY4g7s9DanyyqsKP4g==",
-        }).then((token_res: any) => {
-          console.log('app token=>', token_res.data.data.token)
-
-          axios.get('https://api.jimeikid.com/jiyoumei/product/app/message/send/history/getPlayInfo',{
-            params: {
-              token: musicList[listIndex].ResPwd,
-              videoId: musicList[listIndex].ResVcode
-            },
-            headers: {
-              authorization: token_res.data.data.token
-            }
-          }).then((rres: any) => {
-            console.log('视频资源请求成功=>', rres.data)
-            const mDesc = {
-              PrdtTitle: musicList[listIndex].ResTitle,
-              PrdtCover: musicList[listIndex].ResCover,
-            }
-            setMusicDesc(mDesc)
-            console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL)
-            settestMusic(rres.data.data.body.playInfoList.playInfo[0].playURL)
-            setdurantionTime(rres.data.data.body.playInfoList.playInfo[0].duration)
-            setisFirst(true)
-            setcurrentTime(0)
-            played && setisPlay(true)
+      //请求音频列表
+      axios.post('https://	interapi.jm-kid.com/api/product/resource', {
+        timestamp: Date.now(),
+        prdt_id: reprdtId ? reprdtId : 5113,
+        res_type: '03',
+      }).then((res:any) => {
+        console.log('产品音频列表获取成功=>', res.data)
+
+        //判断播放方式
+        if(res.data.data.StoryResource[listIndex].PlayType === 'url'){
+          const mDesc = {
+            PrdtTitle: res.data.data.StoryResource[listIndex].ResTitle,
+            PrdtCover: res.data.data.StoryResource[listIndex].ResCover,
+          }
+          setMusicDesc(mDesc)
+          settestMusic(res.data.data.StoryResource[listIndex].PlayUrl)
+          setdurantionTime(res.data.data.StoryResource[listIndex].ResDuration)
+          setisFirst(true)
+          setcurrentTime(0)
+          played && setisPlay(true)
+        }else{
+          //app request for video resource
+          axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', {
+            "password": "WxBmGKupbl30+v4hfQC8aQ==",
+            "userName": "VqwgIY4g7s9DanyyqsKP4g==",
+          }).then((token_res: any) => {
+            console.log('app token=>', token_res.data.data.token)
+
+            axios.get('https://api.jimeikid.com/jiyoumei/product/app/message/send/history/getPlayInfo',{
+              params: {
+                token: res.data.data.StoryResource[listIndex].ResPwd,
+                videoId: res.data.data.StoryResource[listIndex].ResVcode
+              },
+              headers: {
+                authorization: token_res.data.data.token
+              }
+            }).then((rres: any) => {
+              console.log('视频资源请求成功=>', rres.data)
+              const mDesc = {
+                PrdtTitle: res.data.data.StoryResource[listIndex].ResTitle,
+                PrdtCover: res.data.data.StoryResource[listIndex].ResCover,
+              }
+              setMusicDesc(mDesc)
+              console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL)
+              settestMusic(rres.data.data.body.playInfoList.playInfo[0].playURL)
+              setdurantionTime(rres.data.data.body.playInfoList.playInfo[0].duration)
+              setisFirst(true)
+              setcurrentTime(0)
+              played && setisPlay(true)
+            })
           })
-        })
-      }
+        }
+      })
     }
   }, [listIndex])