fix

src/pages/index copy.tsx

@@ -0,0 +1,422 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react'
+import './index.less'
+import { useLocation } from 'umi'
+import axios from 'axios'
+import * as HLS from 'hls.js';
+import { ConfigProvider, Slider } from 'antd';
+import PopupHalfScreen from '@/components/Popup';
+import RgupHalfScreen from '@/components/rgup';
+
+
+export default function HomePage() {
+
+  const location = useLocation()
+
+  const videoRef = useRef<any>(null);
+
+  const [testMusic, settestMusic] = useState("https://alihls.jm-kid.com/6b46fb4068b471ee803f6723b78e0102/fabee8a31fff0477f788beee1ac8901c-ld-encrypt-stream.m3u8")
+
+  const [MusicDesc, setMusicDesc] = useState<any>({})
+
+  const [currentTime, setcurrentTime] = useState(0)
+
+  const [durantionTime, setdurantionTime] = useState(230)
+
+  const [isPlay, setisPlay] = useState(false)
+
+  //检查是否为第一次播放,每次切换音频时需要重置
+  const [isFirst, setisFirst] = useState(true)
+  
+  //是否有操作过播放或者切换（用以判断是否需要自动播放，受限于浏览器规则，用户刚进来时没法自动播放）
+  const [played, setPlayed] = useState(false)
+
+  //音频列表
+  const [musicList, setmusicList] = useState<any[]>([])
+
+  //控制列表抽屉显示隐藏
+  const [isShowList, setisShowList] = useState<boolean>(false)
+
+  //记录列表序号index
+  const [listIndex, setlistIndex] = useState(0)
+
+  //记录音频播放模式
+  //0 列表循环
+  //1 单曲循环
+  const [playMode, setplayMode] = useState<number>(0)
+
+  // 定时播放
+  const [playTimer, setPlayTimer] = useState<number>(0)
+
+  //控制定时播放弹窗
+  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('')
+
+  const formatSecondsToTime = (seconds: number) => {
+    // 将秒数转换为整数秒和毫秒
+    const totalSeconds = Math.floor(seconds);
+
+    // 分钟数
+    const minutes = Math.floor(totalSeconds / 60);
+    // 剩余秒数
+    const remainingSeconds = totalSeconds % 60;
+
+    // 补零操作
+    const formattedMinutes = minutes.toString().padStart(2, '0');
+    const formattedSeconds = remainingSeconds.toString().padStart(2, '0');
+
+    return `${formattedMinutes}:${formattedSeconds}`;
+  }
+
+  // const { prdtId, resId } = useParams()
+
+  useEffect(() => {
+    console.log('location=>', location, window.location.href)
+
+    const url = window.location.href
+
+    // 正则表达式来匹配prdtId和resId的值
+    const regex = /\?prdtId=(\d+)&resId=(\d+)/;
+    const match = url.match(regex);
+
+    let prdtId: any;
+    let resId: any;
+
+    if (match) {
+      prdtId = match[1]; // 获取第一个捕获组的值
+      resId = match[2]; // 获取第二个捕获组的值
+      setreprdtId(prdtId)
+      
+      console.log(`prdtId: ${prdtId}, resId: ${resId}`);
+    } else {
+      console.log('没有找到匹配项');
+    }
+    //
+    // prdtId => 4500
+    // resId => 36208 
+
+    //请求音频列表
+    axios.post('https://interapi.jm-kid.com/api/audio/product/detail', {
+      timestamp: Date.now(),
+      prdt_id: prdtId ? prdtId : 5653,
+    }).then((res:any) => {
+      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)
+    })
+  }, [])
+
+  const startTimer = () => {
+    stopTimer()
+    const id = setTimeout(() => {
+      setisPlay(false)
+      setPlayTimer(0)
+      clearTimeout(id);
+      setTimerId(null);
+    // }, playTimer * 1000 * 3);
+  }, playTimer * 1000 * 60 * 10);
+    setTimerId(id);
+  };
+
+  const stopTimer = () => {
+    if (timerId !== null) {
+      clearInterval(timerId);
+      setTimerId(null);
+    }
+  };
+
+  useEffect(() => {
+    playTimer && startTimer()
+  }, [playTimer])
+
+  useEffect(() => {
+    isPlay && setPlayed(true)
+    if(currentTime === durantionTime - 1){
+      setcurrentTime(0)
+    }
+
+    const audio = videoRef.current;
+
+    if (isPlay) {
+      audioAddEvent()
+      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
+            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(); // 开始播放
+          setisFirst(false)
+        });
+      }
+      
+    }else{
+      audio.pause()
+    }
+  }, [isPlay])
+
+  useEffect(()=>{
+    if(listIndex !== -1 && musicList.length > 0){
+      console.log('切换音频', listIndex)
+      played && setisPlay(false)
+      axios.post('https://interapi.jm-kid.com/api/audio/resource', {
+        timestamp: Date.now(),
+        prdt_id: reprdtId ? reprdtId : 5653,
+        res_id: musicList[listIndex].ResId,
+      }).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)
+          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.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('视频资源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)
+              played && setisPlay(true)
+            })
+          })
+        }
+  
+        
+      })
+    }
+    
+  }, [listIndex])
+
+  
+  const audioAddEvent = () => {
+    // if (!played) {
+      const audio = videoRef.current;
+      audio.removeEventListener('timeupdate', timeupdateHandle)
+      audio.addEventListener('timeupdate', timeupdateHandle)
+
+      audio.removeEventListener('pause', timeupdateHandle)
+      audio.addEventListener('pause', timeupdateHandle)
+
+      audio.removeEventListener('ended', endedHandle)
+      audio.addEventListener('ended', endedHandle)
+
+      audio.removeEventListener('play', playHandle)
+      audio.addEventListener('play', playHandle)
+    // }
+  }
+  
+  const timeupdateHandle = () => {
+    setcurrentTime(videoRef.current.currentTime)
+  }
+  
+  const endedHandle = () => {
+    // setisPlay(false)
+    console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, typeof playMode)
+    // debugger
+    if (playMode === 0) {
+      if(listIndex < musicList.length - 1){
+        setlistIndex(listIndex + 1)
+      }else{
+        setlistIndex(0)
+      }
+      audioAddEvent()
+    } else if (playMode === 1) {
+      videoRef.current.currentTime = 0
+      videoRef.current.play()
+    }
+  }
+  
+  const playHandle = () => {
+    setisPlay(true)
+  }
+
+  const handleClickList = () => {
+    setisShowList(true)
+  }
+
+  return (
+    <div className='audioItfc_bg'>
+      <div 
+        className='audio_disc'
+        style={isPlay ? {animation: 'spin 10s linear infinite', backgroundImage: `url(${MusicDesc.PrdtCover})`} : {backgroundImage: `url(${MusicDesc.PrdtCover})`}}
+      >
+        <div className='audio_disc_bearing'></div>
+      </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={{
+            components: {
+              Slider: {
+                handleColor: '#3ba366',
+                handleActiveColor: '#3ba366',
+                railBg: 'rgba(59, 163, 102, 0.4)',
+                railHoverBg: 'rgba(59, 163, 102, 0.4)',
+                trackBg: '#3ba366',
+                trackHoverBg: '#3ba366',
+              }
+              
+            }
+          }}
+        >
+          <Slider
+            step={1}
+            tooltip={{
+              open: false,
+            }}
+            min={0}
+            max={durantionTime}
+            value={currentTime}
+            onChange={(currentTime)=>{
+              console.log('拖拽中', currentTime)
+              setcurrentTime(currentTime)
+            }}
+            onChangeComplete={(currentTime)=>{
+              console.log('拖拽结束', currentTime)
+              const audio = videoRef.current
+              audio.currentTime = currentTime
+            }}
+          />
+        </ConfigProvider>
+        
+        <audio ref={videoRef}></audio>
+        
+        <div className='audio_progress_time_bar'>
+          <div 
+            className='audio_progress_time' 
+            style={{marginRight: 'auto'}}
+          >
+            {formatSecondsToTime(currentTime)}
+          </div>
+          <div 
+            className='audio_progress_time' 
+            style={{marginLeft: 'auto'}}
+          >
+            {formatSecondsToTime(durantionTime)}
+          </div>
+        </div>
+        <div className='audio_operate'>
+          {playMode}
+          <img
+            className='audio_operate_btn0'
+            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(playMode ? 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{
+                setlistIndex(listIndex - 1)
+              }
+            }}
+          ></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={() => setisPlay(!isPlay)}
+          ></img>
+          <img 
+            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{
+                setlistIndex(0)
+              }
+            }}
+          ></img>
+          <img
+            className='audio_operate_btn0'
+            src='https://oss.jm-kid.com/wx_5colorflower/assets/list.png'
+            onClick={handleClickList}
+          ></img>
+        </div>
+        
+      </div>
+      
+
+      <PopupHalfScreen
+        visible={isShowList}
+        onClose={() => setisShowList(false)}
+        list={musicList}
+        index={listIndex}
+        setIndex={setlistIndex}
+      ></PopupHalfScreen>
+
+      <RgupHalfScreen
+        visible={isShowRg}
+        onClose={() => setisShowRg(false)}
+        playTimer={playTimer}
+        setPlayTimer={setPlayTimer}
+      ></RgupHalfScreen>
+    </div>
+  )
+}

src/pages/index.tsx

@@ -181,20 +181,17 @@ export default function HomePage() {
 
     audio.addEventListener('ended', () => {
       setisPlay(false)
+      console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, listIndex)
       if(playMode === 0){
         if(listIndex < musicList.length - 1){
           setlistIndex(listIndex + 1)
         }else{
           setlistIndex(0)
         }
+        videoRef.current.currentTime = 0
       }else if(playMode === 1){
-        
+        videoRef.current.currentTime = 0
       }
-      audio.currentTime = 0
-    })
-
-    audio.addEventListener('error', (res: any) => {
-      console.log('error', res)
     })
 
     audio.addEventListener('pause', () => {
@@ -268,6 +265,33 @@ export default function HomePage() {
     
   }, [listIndex])
 
+  
+  
+  const timeupdateHandle = () => {
+    setcurrentTime(videoRef.current.currentTime)
+  }
+  
+  const endedHandle = () => {
+    // setisPlay(false)
+    console.log("🚀 ~ audio.addEventListener ~ playMode:", playMode, typeof playMode)
+    // debugger
+    if (playMode === 0) {
+      if(listIndex < musicList.length - 1){
+        setlistIndex(listIndex + 1)
+      }else{
+        setlistIndex(0)
+      }
+      audioAddEvent()
+    } else if (playMode === 1) {
+      videoRef.current.currentTime = 0
+      videoRef.current.play()
+    }
+  }
+  
+  const playHandle = () => {
+    setisPlay(true)
+  }
+  
   const handleClickList = () => {
     setisShowList(true)
   }