import React , { useCallback , useEffect } from 'react' ; import './Music.scss' ; import AudioHttp from '../../utils/Http/HttpList/Audio' ; import loadable from "@loadable/component" ; const MusicCenter = loadable ( ( ) => import ( "./MusicCenter/MusicCenter" ) ) ; export default function Music ( ) { const [ playAudio , setPlayAudio ] = React . useState < boolean > ( false ) ; const [ audioUrl , setAudioUrl ] = React . useState < string > ( '' ) ; const [ audioState , setAudioState ] = React . useState < object > ( { } ) ; const [ centerShow , setCenter ] = React . useState < boolean > ( false ) ; const [ audioVolume , setAudioVolume ] = React . useState < number > ( 0.5 ) ; const [ showControlVolume , setControlVolume ] = React . useState < boolean > ( false ) ; const [ controlLength , setControlLength ] = React . useState < number > ( 0 ) ; const volumeProgess = React . useRef ( null ) ; const progessLength = React . useRef ( null ) ; const useAudioRef = React . useRef ( null ) ; const play = React . useCallback ( async ( ) => { if ( ! playAudio ) { await useAudioRef . current . play ( ) ; useAudioRef . current . getDuration ( ) ; setPlayAudio ( true ) ; } else { await useAudioRef . current . pause ( ) ; setPlayAudio ( false ) ; } setAudioVolume ( useAudioRef . current . getVolume ( ) ) ; } , [ playAudio ] ) ; const stopPlay = ( ) => setPlayAudio ( false ) ; const getMusicUrlAddress = useCallback ( async ( ) => { const musiclist = await AudioHttp . search ( '海阔天空' ) ; console . log ( musiclist , 'musiclist' ) ; setAudioState ( musiclist . result . songs [ 0 ] ) ; const data = await AudioHttp . getMusicUrl ( musiclist . result . songs [ 0 ] . id ) ; await setAudioUrl ( data . data [ 0 ] . url ) ; } , [ ] ) ; useEffect ( ( ) => { getMusicUrlAddress ( ) ; } , [ ] ) ; const changeVolumn = ( e ) => React . useCallback ( ( ) => { setControlVolume ( ! showControlVolume ) ; } , [ showControlVolume ] ) ; const progessMouseDown = ( event ) => { event . persist ( ) ; const docNode = event . target ; const volumeNotify = ( event . pageY - docNode . getBoundingClientRect ( ) . top ) ; console . log ( volumeNotify , '///' ) ; setControlLength ( volumeNotify ) ; const nowVolume = Number ( ( ( 93 - volumeNotify ) / 93 ) . toFixed ( 1 ) ) ; console . log ( event . target . getBoundingClientRect ( ) . top , docNode . getBoundingClientRect ( ) . top , 'mmmm' ) ; setAudioVolume ( nowVolume < 1 ? nowVolume : 1 ) ; volumeProgess . current ! . onmousemove = changeVolumeDown ; } ; React . useEffect ( ( ) => { setTimeout ( ( ) => { setCenter ( true ) ; } , 200 ) ; } , [ centerShow ] ) ; const changeVolumeDown = ( e ) : void => { } ; const volumeMoveChange = ( event ) => { } ; const volumeBox = ( < div className = "volumeBox" > < div className = "volumeProgess" onMouseDown = { progessMouseDown } ref = { volumeProgess } onMouseMove = { volumeMoveChange } id = "volumeProgess" > < span className = "progessLength" style = { { height : `${ controlLength }px` } } ref = { progessLength } id = "progessLength" / > < span className = "volumeSwich" style = { { top : ( controlLength - 20 ) < - 8 ? - 8 : ( controlLength - 20 ) + 'px' } } /> < /div> < /div>); return ( < div className = "music" > { } { } < div className = "musicBox" > { } < div className = "musicConstructor" > { } < div className = "constructorLeft" > < span /> < span onClick = { play } style = { { backgroundPosition : playAudio ? `-2px -166px` : `-2px -205px` } } /> < span / > < /div> { } < div className = "constructorCenter" > { audioUrl && centerShow ? < MusicCenter audioUrl = { audioUrl } ref = { useAudioRef } audioVolume = { audioVolume } stopPlay = { stopPlay } audioState = { audioState } / > : null } < /div> { } < div className = "collection" > < span /> < span / > < /div> { } < div className = "gradintLine" / > { } < div className = "volumnBox" > { } { audioVolume <= 0 ? < i className = 'zeroVolumn' onClick = { changeVolumn ( event ) } / > : < i onClick = { changeVolumn ( event ) } />} < i / > < i /> { showControlVolume ? volumeBox : null } { } < /div> < /div> < /div> { } < div className = "hand" > < span className = "lock" / > < /div> < /div>); }