hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-10 03:16:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix tts play logic (#2683)

Browse Source 
Co-authored-by: luowei <glpat-EjySCyNjWiLqAED-YmwM>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
This commit is contained in:
Charlie.Wei
2024-03-05 09:22:36 +08:00
committed by GitHub
parent 534802b761
commit 69a5ce1e31
4 changed files with 27 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/app/components/base/audio-btn/index.tsx
View File

@@ -61,13 +61,14 @@ const AudioBtn = ({
const audioUrl = URL.createObjectURL(blob)
const audio = new Audio(audioUrl)
audioRef.current = audio
audio.play().then(() => {
setIsPlaying(true)
}).catch(() => {
audio.play().then(() => {}).catch(() => {
setIsPlaying(false)
URL.revokeObjectURL(audioUrl)
})
audio.onended = () => setHasEnded(true)
audio.onended = () => {
setHasEnded(true)
setIsPlaying(false)
}
}
catch (error) {
setIsPlaying(false)
@@ -75,24 +76,34 @@ const AudioBtn = ({
}
}
}
const togglePlayPause = () => {
if (audioRef.current) {
if (isPlaying) {
setPause(true)
audioRef.current.pause()
}
else if (!hasEnded) {
setPause(false)
audioRef.current.play()
if (!hasEnded) {
setPause(false)
audioRef.current.play()
}
if (!isPause) {
setPause(true)
audioRef.current.pause()
}
}
else if (!isPlaying) {
playAudio().then()
if (isPause) {
setPause(false)
audioRef.current.play()
}
else {
setHasEnded(false)
playAudio().then()
}
}
setIsPlaying(prevIsPlaying => !prevIsPlaying)
}
else {
playAudio().then()
setIsPlaying(true)
if (!isPlaying)
playAudio().then()
}
}
@@ -107,7 +118,7 @@ const AudioBtn = ({
className={`box-border p-0.5 flex items-center justify-center cursor-pointer ${isAudition || 'rounded-md bg-white'}`}
style={{ boxShadow: !isAudition ? '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)' : '' }}
onClick={togglePlayPause}>
<div className={`w-6 h-6 rounded-md ${!isAudition ? 'hover:bg-gray-200' : 'hover:bg-gray-50'} ${!isPause ? ((isPlaying && !hasEnded) ? s.playIcon : s.stopIcon) : s.pauseIcon}`}></div>
<div className={`w-6 h-6 rounded-md ${!isAudition ? 'hover:bg-gray-200' : 'hover:bg-gray-50'} ${(isPlaying && !hasEnded) ? s.pauseIcon : s.playIcon}`}></div>
</div>
</Tooltip>
</div>