fix

1 month ago · a5effd77c6
parent 4b5d904ade
commit a5effd77c6
2 changed files with 145 additions and 217 deletions
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -37,7 +37,7 @@ export default function HomePage() {
  const [isShowList, setisShowList] = useState<boolean>(false)

  //记录列表序号index
-  const [listIndex, setlistIndex] = useState(0)
+  const [listIndex, setlistIndex] = useState(-1)

  //记录音频播放模式
  //0 列表循环
@ -51,7 +51,6 @@ export default function HomePage() {
  const [isShowRg, setisShowRg] = useState(false)

  const [timerId, setTimerId] = useState<null | ReturnType<typeof setInterval>>(null);
-  const [selectedDuration, setSelectedDuration] = useState(600); // 默认选择600秒

  //记录prdtId
  const [reprdtId, setreprdtId] = useState('')
@ -119,7 +118,7 @@ export default function HomePage() {
      clearTimeout(id);
      setTimerId(null);
    // }, playTimer * 1000 * 3);
-  }, playTimer * 1000 * 60 * 10);
+    }, playTimer * 1000 * 60 * 10);
    setTimerId(id);
  };

@ -165,7 +164,7 @@ export default function HomePage() {
        console.log('加载HLS流地址=>', testMusic)
        hls.loadSource(testMusic); // 加载 HLS 流地址
        hls.attachMedia(audio); // 关联 media 元素
-        hls.on(HLS.Events.MANIFEST_PARSED, function() {
+        hls.on(HLS.Events.MANIFEST_PARSED, function () {
          audio.play(); // 开始播放
          setisFirst(false)
        });
@ -174,18 +173,6 @@ export default function HomePage() {
    }else{
      audio.pause()
    }
-
-    audio.addEventListener('timeupdate', () => {
-      setcurrentTime(audio.currentTime)
-    })
-
-    audio.addEventListener('pause', () => {
-      setcurrentTime(audio.currentTime)
-    })
-
-    audio.addEventListener('play', () => {
-      setisPlay(true)
-    })
  }, [isPlay])

  useEffect(()=>{
@ -250,31 +237,36 @@ export default function HomePage() {
  useEffect(() => {
    const audio = videoRef.current
    if (audio) {
-      audio.addEventListener('ended', endedHandle);
+      audio.addEventListener('timeupdate', timeupdateHandle)
+      audio.addEventListener('pause', timeupdateHandle)
+      audio.addEventListener('play', playHandle)
+      audio.addEventListener('ended', endedHandle)
    }

    return () => {
      if (audio) {
-        audio.removeEventListener('ended', endedHandle);
+        audio.removeEventListener('timeupdate', timeupdateHandle)
+        audio.removeEventListener('pause', timeupdateHandle)
+        audio.removeEventListener('play', playHandle)
+        audio.removeEventListener('ended', endedHandle)
      }
-    };
+    }
  }, [listIndex, playMode])
  
-  const timeupdateHandle = () => {
-    setcurrentTime(videoRef.current.currentTime)
-  }
-  
  const endedHandle = () => {
-    console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, listIndex)
-      if(playMode === 0){
-        setisPlay(false)
-        if(listIndex < musicList.length - 1){
-          setlistIndex(listIndex + 1)
-        }else{
-          setlistIndex(0)
-        }
-        videoRef.current.currentTime = 0
+    if(playMode === 0){
+      setisPlay(false)
+      if(listIndex < musicList.length - 1){
+        setlistIndex(listIndex + 1)
+      }else{
+        setlistIndex(0)
      }
+      videoRef.current.currentTime = 0
+    }
+  }
+  
+  const timeupdateHandle = () => {
+    setcurrentTime(videoRef.current.currentTime)
  }
  
  const playHandle = () => {
@ -303,7 +295,7 @@ export default function HomePage() {
            src='https://oss.jm-kid.com/wx_5colorflower/assets/regularPlay.png'
            onClick={() => setisShowRg(true)}
          ></img>
-          </div>
+        </div>

        <ConfigProvider
          theme={{
@ -340,7 +332,7 @@ export default function HomePage() {
          />
        </ConfigProvider>
        
-        <audio ref={videoRef} loop={!!playMode}></audio>
+        <audio ref={videoRef} loop={!!playMode} playsInline></audio>
        
        <div className='audio_progress_time_bar'>
          <div 
--- a/src/pages/listen.tsx
+++ b/src/pages/listen.tsx
@ -26,6 +26,9 @@ export default function HomePage() {

  //检查是否为第一次播放,每次切换音频时需要重置
  const [isFirst, setisFirst] = useState(true)
+  
+  //是否有操作过播放或者切换（用以判断是否需要自动播放，受限于浏览器规则，用户刚进来时没法自动播放）
+  const [played, setPlayed] = useState(false)

  //音频列表
  const [musicList, setmusicList] = useState<any[]>([])
@ -34,14 +37,16 @@ export default function HomePage() {
  const [isShowList, setisShowList] = useState<boolean>(false)

  //记录列表序号index
-  const [listIndex, setlistIndex] = useState(0)
+  const [listIndex, setlistIndex] = useState(-1)

  //记录音频播放模式
  //0 列表循环
  //1 单曲循环
-  //2 定时播放
  const [playMode, setplayMode] = useState<number>(0)

+  // 定时播放
+  const [playTimer, setPlayTimer] = useState<number>(0)
+
  //控制定时播放弹窗
  const [isShowRg, setisShowRg] = useState(false)

@ -93,7 +98,7 @@ export default function HomePage() {
    // resId => 36208 

    //请求音频列表
-    axios.post('https://	interapi.jm-kid.com/api/product/resource', {
+    axios.post('https://interapi.jm-kid.com/api/product/resource', {
      timestamp: Date.now(),
      prdt_id: prdtId ? prdtId : 5113,
      res_type: '03',
@ -101,62 +106,19 @@ export default function HomePage() {
      console.log('产品音频列表获取成功=>', res.data)
      setmusicList(res.data.data.StoryResource)

-      console.log('PlayType=>', res.data.data.StoryResource[0].PlayType)
-      //判断播放方式
-      if(res.data.data.StoryResource[0].PlayType === 'url'){
-        console.log('url播放方式')
-        const mDesc = {
-          PrdtTitle: res.data.data.StoryResource[0].ResTitle,
-          PrdtCover: res.data.data.StoryResource[0].ResCover,
-        }
-        setMusicDesc(mDesc)
-        settestMusic(res.data.data.StoryResource[0].PlayUrl)
-        setdurantionTime(res.data.data.StoryResource[0].ResDuration)
-      }else{
-        console.log('app播放方式')
-        //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[0].ResPwd,
-              videoId: res.data.data.StoryResource[0].ResVcode
-            },
-            headers: {
-              authorization: token_res.data.data.token
-            }
-          }).then((rres: any) => {
-            console.log('视频资源请求成功=>', rres.data)
-            const mDesc = {
-              PrdtTitle: res.data.data.StoryResource[0].ResTitle,
-              PrdtCover: res.data.data.StoryResource[0].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)
-          })
-        })
-      }
+      setlistIndex(0)
    })
-
-    
  }, [])

  const startTimer = () => {
-    if (timerId !== null) return; // 如果已经有计时器在运行，则返回
-    let id = setInterval(() => {
-      setSeconds(prevSeconds => prevSeconds + 1);
-      if (seconds >= selectedDuration - 1) {
-        videoRef.current = null;
-        clearInterval(id);
-        setTimerId(null);
-      }
-    }, 1000);
+    stopTimer()
+    const id = setTimeout(() => {
+      setisPlay(false)
+      setPlayTimer(0)
+      clearTimeout(id);
+      setTimerId(null);
+    // }, playTimer * 1000 * 3);
+    }, playTimer * 1000 * 60 * 10);
    setTimerId(id);
  };

@ -164,32 +126,15 @@ export default function HomePage() {
    if (timerId !== null) {
      clearInterval(timerId);
      setTimerId(null);
-      setSeconds(0); // 重置秒数
    }
  };

  useEffect(() => {
-    return () => {
-      if (timerId !== null) {
-        clearInterval(timerId);
-      }
-    };
-  }, [timerId]); // 只有当 timerId 发生变化时才执行
-
-  useEffect(()=> {
-    if(playMode > 2){
-      if(selectedDuration !== (playMode - 2) * 600){
-        stopTimer()
-        setSelectedDuration((playMode - 2) * 600)
-        startTimer()
-      }
-    }else if(playMode === 2){
-      stopTimer()
-    }
-  }, [playMode])
+    playTimer && startTimer()
+  }, [playTimer])

  useEffect(()=>{
-
+    isPlay && setPlayed(true)
    if(currentTime === durantionTime - 1){
      setcurrentTime(0)
    }
@ -221,115 +166,104 @@ export default function HomePage() {
        hls.attachMedia(audio); // 关联 media 元素
        hls.on(HLS.Events.MANIFEST_PARSED, function() {
          audio.play(); // 开始播放
+          setisFirst(false)
        });
      }
      
    }else{
      audio.pause()
    }
-
-    audio.addEventListener('timeupdate', () => {
-      setcurrentTime(audio.currentTime)
-    })
-
-    audio.addEventListener('ended',  () => {
-      console.log('音频播放结束')
-      setisPlay(false)
-      if(playMode === 0){
-        if(listIndex < musicList.length - 1){
-          console.log('下一首,更改listIndex', listIndex)
-          setlistIndex(listIndex + 1)
-        }else{
-          setlistIndex(0)
-        }
-      }else if(playMode === 1){
-        
-      }else if(playMode === 2){
-        setplayMode(0)
-      }
-      audio.currentTime = 0
-    })
-
-    audio.addEventListener('error', (res: any) => {
-      console.log('error', res)
-    })
-
-    audio.addEventListener('pause', () => {
-      setcurrentTime(audio.currentTime)
-      setisPlay(false)
-    })
-
-    audio.addEventListener('play', () => {
-      setisPlay(true)
-    })
  }, [isPlay])

  useEffect(()=>{
+    console.log('切换音频', listIndex, musicList)
    if(listIndex !== -1 && musicList.length > 0){
-      console.log('切换音频', listIndex)
-      setisPlay(false)
-      //请求音频列表
-      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)
-          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)
-              setisPlay(true)
-            })
-          })
+      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)
+          })
+        })
      }
-    
+    }
  }, [listIndex])

-  useEffect(()=>{
-    if(playMode > 1){
-      setisShowRg(true)
+  useEffect(() => {
+    const audio = videoRef.current
+    if (audio) {
+      audio.addEventListener('timeupdate', timeupdateHandle)
+      audio.addEventListener('pause', timeupdateHandle)
+      audio.addEventListener('play', playHandle)
+      audio.addEventListener('ended', endedHandle)
    }
-  }, [playMode])
+
+    return () => {
+      if (audio) {
+        audio.removeEventListener('timeupdate', timeupdateHandle)
+        audio.removeEventListener('pause', timeupdateHandle)
+        audio.removeEventListener('play', playHandle)
+        audio.removeEventListener('ended', endedHandle)
+      }
+    }
+  }, [listIndex, playMode])
+
+  const endedHandle = () => {
+    if(playMode === 0){
+      setisPlay(false)
+      if(listIndex < musicList.length - 1){
+        setlistIndex(listIndex + 1)
+      }else{
+        setlistIndex(0)
+      }
+      videoRef.current.currentTime = 0
+    }
+  }
+  
+  const timeupdateHandle = () => {
+    setcurrentTime(videoRef.current.currentTime)
+  }
+  
+  const playHandle = () => {
+    setisPlay(true)
+  }

  const handleClickList = () => {
    setisShowList(true)
@ -345,7 +279,15 @@ export default function HomePage() {
      </div>
      
      <div className='audio_progress_bar'>
+      <div className="audio_title_wrap">
        <div className='audio_title'>{MusicDesc.PrdtTitle}</div>
+  
+        <img
+          className='audio_btn'
+          src='https://oss.jm-kid.com/wx_5colorflower/assets/regularPlay.png'
+          onClick={() => setisShowRg(true)}
+        ></img>
+      </div>

        <ConfigProvider
          theme={{
@ -382,7 +324,7 @@ export default function HomePage() {
          />
        </ConfigProvider>
        
-        <audio ref={videoRef}></audio>
+        <audio ref={videoRef} loop={!!playMode} playsInline></audio>
        
        <div className='audio_progress_time_bar'>
          <div 
@ -399,23 +341,16 @@ export default function HomePage() {
          </div>
        </div>
        <div className='audio_operate'>
-          <img
+        <img
            className='audio_operate_btn0'
-            src={playMode === 0 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/listPlay.png' : playMode === 1 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/cyclePlay.png' : 'https://oss.jm-kid.com/wx_5colorflower/assets/regularPlay.png'}
-            onClick={() => {
-              if(playMode === 0){
-                setplayMode(1)
-              }else if(playMode === 1){
-                setplayMode(2)
-              }else{
-                setplayMode(0)
-              }
-            }}
+            src={playMode === 0 ? 'https://oss.jm-kid.com/wx_5colorflower/assets/listPlay.png' : 'https://oss.jm-kid.com/wx_5colorflower/assets/cyclePlay.png'}
+            onClick={() => setplayMode(m => m ? 0 : 1)}
          ></img>
          <img 
            className='audio_operate_btn0'
            src='https://oss.jm-kid.com/wx_5colorflower/assets/prev.png'
            onClick={() => {
+              setPlayed(true)
              if(listIndex === 0){
                setlistIndex(musicList.length - 1)
              }else{
@ -432,6 +367,7 @@ export default function HomePage() {
            className='audio_operate_btn0'
            src='https://oss.jm-kid.com/wx_5colorflower/assets/next.png'
            onClick={() => {
+              setPlayed(true)
              if(listIndex < musicList.length - 1){
                setlistIndex(listIndex + 1)
              }else{
@ -460,8 +396,8 @@ export default function HomePage() {
      <RgupHalfScreen
        visible={isShowRg}
        onClose={() => setisShowRg(false)}
-        type={playMode}
-        setType={setplayMode}
+        playTimer={playTimer}
+        setPlayTimer={setPlayTimer}
      ></RgupHalfScreen>
    </div>
  )