fix

src/pages/index.tsx

@@ -26,6 +26,9 @@ export default function HomePage() {
 
   //检查是否为第一次播放,每次切换音频时需要重置
   const [isFirst, setisFirst] = useState(true)
+  
+  //是否有操作过播放或者切换（用以判断是否需要自动播放，受限于浏览器规则，用户刚进来时没法自动播放）
+  const [played, setPlayed] = useState(false)
 
   //音频列表
   const [musicList, setmusicList] = useState<any[]>([])
@@ -100,65 +103,11 @@ export default function HomePage() {
       timestamp: Date.now(),
       prdt_id: prdtId ? prdtId : 5653,
     }).then((res:any) => {
-      console.log('产品音频列表获取成功=>', res.data)
-      for(let i = 0; i < res.data.data.Resources.length; i++){
-        if(res.data.data.Resources[i].ResId === resId){
-          setlistIndex(i)
-        }
-      }
+      const cur = res.data.data.Resources.findIndex((e: any) => e.ResId === +resId)
+      setlistIndex(cur !== -1 ? cur : 0)
+      console.log('产品音频列表获取成功=>', res.data, typeof resId, cur)
       setmusicList(res.data.data.Resources)
-
-      axios.post('https://interapi.jm-kid.com/api/audio/resource', {
-        timestamp: Date.now(),
-        prdt_id: prdtId ? prdtId :5653,
-        res_id: resId ? resId : 44889 ,
-      }).then((res: any) => {
-        console.log('产品资源获取成功=>', res.data)
-
-        //判断播放方式
-        if(res.data.data.Resource.PlayType === 'url'){
-          const mDesc = {
-            PrdtTitle: res.data.data.Resource.ResTitle,
-            PrdtCover: res.data.data.Resource.ResCover,
-          }
-          setMusicDesc(mDesc)
-          settestMusic(res.data.data.Resource.PlayUrl)
-          setdurantionTime(res.data.data.Resource.ResDuration)
-        }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.Resource.ResPwd,
-                videoId: res.data.data.Resource.ResVcode
-              },
-              headers: {
-                authorization: token_res.data.data.token
-              }
-            }).then((rres: any) => {
-              console.log('视频资源请求成功=>', rres.data)
-              const mDesc = {
-                PrdtTitle: res.data.data.Resource.ResTitle,
-                PrdtCover: res.data.data.Resource.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)
-            })
-          })
-        }
-  
-        
-      })
     })
-
-    
   }, [])
 
   const startTimer = () => {
@@ -190,7 +139,7 @@ export default function HomePage() {
     };
   }, [timerId]); // 只有当 timerId 发生变化时才执行
 
-  useEffect(()=> {
+  useEffect(() => {
     if(playMode > 2){
       if(selectedDuration !== (playMode - 2) * 600){
         stopTimer()
@@ -202,15 +151,15 @@ export default function HomePage() {
     }
   }, [playMode])
 
-  useEffect(()=>{
-
+  useEffect(() => {
+    isPlay && setPlayed(true)
     if(currentTime === durantionTime - 1){
       setcurrentTime(0)
     }
 
     const audio = videoRef.current;
 
-    if(isPlay){
+    if (isPlay) {
       if(currentTime !== 0){
         if(isFirst){
           console.log('第一次播放')
@@ -279,7 +228,7 @@ export default function HomePage() {
   useEffect(()=>{
     if(listIndex !== -1 && musicList.length > 0){
       console.log('切换音频', listIndex)
-      setisPlay(false)
+      played && setisPlay(false)
       axios.post('https://interapi.jm-kid.com/api/audio/resource', {
         timestamp: Date.now(),
         prdt_id: reprdtId ? reprdtId : 5653,
@@ -298,7 +247,7 @@ export default function HomePage() {
           setdurantionTime(res.data.data.Resource.ResDuration)
           setisFirst(true)
           setcurrentTime(0)
-          setisPlay(true)
+          played && setisPlay(true)
         }else{
           //app request for video resource
           axios.post('https://api.jimeikid.com/jiyoumei/system/admin/employee/login', {
@@ -322,12 +271,12 @@ export default function HomePage() {
                 PrdtCover: res.data.data.Resource.ResCover,
               }
               setMusicDesc(mDesc)
-              console.log('视频资源=>',rres.data.data.body.playInfoList.playInfo[0].playURL)
+              console.log('视频资源1=>',rres.data.data.body.playInfoList.playInfo[0].playURL, played)
               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(true)
             })
           })
         }
@@ -429,6 +378,7 @@ export default function HomePage() {
             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{
@@ -445,6 +395,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{