diff --git a/web/app/components/base/audio-btn/index.tsx b/web/app/components/base/audio-btn/index.tsx
index 6c9f3e253b..1492b859fa 100644
--- a/web/app/components/base/audio-btn/index.tsx
+++ b/web/app/components/base/audio-btn/index.tsx
@@ -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}>
-
+
diff --git a/web/app/components/base/audio-btn/style.module.css b/web/app/components/base/audio-btn/style.module.css
index 7c05003b04..7e3175aa13 100644
--- a/web/app/components/base/audio-btn/style.module.css
+++ b/web/app/components/base/audio-btn/style.module.css
@@ -8,9 +8,3 @@
background-position: center;
background-repeat: no-repeat;
}
-
-.stopIcon {
- background-position: center;
- background-repeat: no-repeat;
- background-image: url(~@/app/components/develop/secret-key/assets/stop.svg);
-}
\ No newline at end of file
diff --git a/web/app/components/develop/secret-key/assets/play.svg b/web/app/components/develop/secret-key/assets/play.svg
index 0ab33af6c6..b423e98ce2 100644
--- a/web/app/components/develop/secret-key/assets/play.svg
+++ b/web/app/components/develop/secret-key/assets/play.svg
@@ -1,7 +1,7 @@