From 00c0f437b3a6a70529e5f7a5cd3e75d582b415df Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Fri, 18 Oct 2024 16:12:04 +0800 Subject: [PATCH] =?UTF-8?q?=E7=86=8F=E5=90=AC=E9=A1=B5hls=E5=85=BC?= =?UTF-8?q?=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index.less | 3 ++ src/pages/index.tsx | 82 +++++++++++++++++++++++++++--------- src/pages/listen.tsx | 98 ++++++++++++++++++++++++-------------------- 3 files changed, 119 insertions(+), 64 deletions(-) diff --git a/src/pages/index.less b/src/pages/index.less index 06209c1..59ba4a4 100644 --- a/src/pages/index.less +++ b/src/pages/index.less @@ -139,6 +139,9 @@ flex-direction: column; } } +.video_ref { + display: none; +} @keyframes spin { from { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e487937..ca6252f 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -11,9 +11,14 @@ import RgupHalfScreen from '@/components/rgup'; export default function HomePage() { const location = useLocation() - + + const audioRef = useRef(null); const videoRef = useRef(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({}) @@ -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 (
+ {/* */} +
{MusicDesc.PrdtTitle}
@@ -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 }} /> - + + +
setisPlay(!isPlay)} > + {/* */} + { 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])