java js前端请求后台去获得音频流，然后播放音乐，音乐可以控制进度，显示总时长

JavaScript015

java js前端请求后台去获得音频流，然后播放音乐，音乐可以控制进度，显示总时长,第1张

AudioCLip主要的方法有：play()播放依次声音；loop()循环播放音乐；stop()停止播放。做法一：InputStreamis=nullAudioStreamas=nullis=getClass().getResourceAsStream("a.wav")try{as=newAudioStream(is)}catch(IOExceptione){}AudioPlayer.player.start(as)此方法将音乐文件放入流中在播放，仅限于JavaApplication，容易报错，空指针异常，或者是流异常，不推荐。做法二：Stringmusic="a.wav"AudioClipclip=Applet.newAudioClip(getClass().getResource(music))次方法在Applet中运行没有问题，但是Application中getclass()会返回空指针，导致失败。推荐做法：privateURLurlprivateAudioClipacFilef1=newFile("C:/3.wav")try{url=f1.toURL()}catch(MalformedURLExceptione){//TODOAuto-generatedcatchblocke.printStackTrace()}ac=Applet.newAudioClip(cb1)ac.play()

----------------------1、转换音频流--------------------------

loadAudioInfo=(audioId)=>{

let _this = this

const url = api.getAudioPath(audioId)

const request = new window.XMLHttpRequest()

request.open('GET', url, true)

request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

request.setRequestHeader("APPID", "huizhan")

request.setRequestHeader("X-Account-Info", JSON.stringify( {userId: Application.userInfo.userId} ))

request.responseType = 'arraybuffer'

request.onreadystatechange = function (res) {

if (request.readyState == 4 && request.status == 200) {

_this.setState({

conferenceAudioWav: 'data:audio/wavbase64,' + Buffer.from(request.response).toString('base64'),

})

}

}

request.onerror = (err) => {

}

request.send()

}

-----------------------------2、正常使用audio标签 src赋值------------------------------

实现原理的话，主要是以下三点，

利用webrtc的getUserMedia方法获取设备音频输入，使用audioprocess得到音频流(pcm流，范围-1到1)。

转码，利用前端中的ArrayBuffer等二进制操作按采样位数处理流信息。

使用decodeAudioData转码arraybuffer到audioBuffer并播放（小文件，大文件使用audio）。