diff --git a/spx-gui/src/components/editor/sprite/AnimationDetail.vue b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
index 628d5cd3e..e4a81a65c 100644
--- a/spx-gui/src/components/editor/sprite/AnimationDetail.vue
+++ b/spx-gui/src/components/editor/sprite/AnimationDetail.vue
@@ -3,6 +3,7 @@
     <AnimationPlayer
       :costumes="animation.costumes"
       :sound="sound"
+      :sound-playback="animation.soundPlayback"
       :duration="animation.duration"
       class="w-full flex-[1_1_0]"
     />
diff --git a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
index e439126c4..22fd41ed4 100644
--- a/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
+++ b/spx-gui/src/components/editor/sprite/animation/AnimationPlayer.vue
@@ -14,6 +14,7 @@ import { onUnmounted, ref, watchEffect } from 'vue'
 import { registerPlayer as registerAudioPlayer } from '@/utils/player-registry'
 import { useActivated } from '@/utils/utils'
 import { Cancelled, capture } from '@/utils/exception'
+import { AnimationSoundPlayback } from '@/models/spx/animation'
 import type { Costume } from '@/models/spx/costume'
 import type { Sound } from '@/models/spx/sound'
 import { UILoading } from '@/components/ui'
@@ -21,19 +22,27 @@ import CostumesPlayer from '@/components/common/CostumesPlayer.vue'
 import CheckerboardBackground from '../CheckerboardBackground.vue'
 import MuteSwitch from './MuteSwitch.vue'
 
-const props = defineProps<{
-  costumes: Costume[]
-  sound: Sound | null
-  duration: number
-}>()
+const props = withDefaults(
+  defineProps<{
+    costumes: Costume[]
+    sound: Sound | null
+    soundPlayback?: AnimationSoundPlayback
+    duration: number
+  }>(),
+  {
+    soundPlayback: AnimationSoundPlayback.Once
+  }
+)
 
 const registered = registerAudioPlayer(() => setMuted(true))
-const audioRef = ref<HTMLAudioElement | null>(null)
+const audios = new Set<HTMLAudioElement>()
 const mutedRef = ref(true)
 function setMuted(muted: boolean) {
   mutedRef.value = muted
-  if (audioRef.value != null) {
-    audioRef.value.muted = muted
+  for (const audio of audios) {
+    audio.muted = muted
+  }
+  if (props.sound != null) {
     if (muted) registered.onStopped()
     else registered.onStart()
   }
@@ -50,25 +59,70 @@ async function loadAudio(sound: Sound, signal: AbortSignal) {
   return audio
 }
 
-function playAudio(audio: HTMLAudioElement, duration: number, signal: AbortSignal) {
-  audio.muted = mutedRef.value
-  audioRef.value = audio
-  const playFromStart = () => {
-    try {
-      audio.currentTime = 0
-      audio.play()
-    } catch {
-      // We can get an error from `play()` if the sound is not loaded yet
-      // or if the sound is not allowed to play
-    }
+// Limit the number of concurrently playing audio instances to prevent overwhelming the browser and causing performance issues or crashes.
+const concurrentAudioLimit = 10
+
+/**
+ * Play the audio with `playback: AnimationSoundPlayback.Once`.
+ * The sound is triggered once per animation cycle (duration).
+ * If the previous sound is still playing when the next cycle starts, it will keep playing.
+ * In that case, multiple sound instances can overlap.
+ */
+function playAudioWithPlaybackOnce(audio: HTMLAudioElement, duration: number, signal: AbortSignal) {
+  function playOnce() {
+    // Create a new audio element to play the sound so it plays independently
+    const newAudio = new Audio(audio.src)
+    newAudio.muted = mutedRef.value
+    audios.add(newAudio)
+    newAudio.addEventListener('ended', () => audios.delete(newAudio), { once: true })
+    signal.addEventListener(
+      'abort',
+      () => {
+        newAudio.pause()
+        audios.delete(newAudio)
+      },
+      { once: true }
+    )
+    setTimeout(
+      () => {
+        // Stop the newAudio after some time to prevent too many overlapping audios
+        newAudio.pause()
+        audios.delete(newAudio)
+      },
+      duration * 1000 * concurrentAudioLimit
+    )
+    newAudio.play()
   }
+  playOnce()
+  const timer = setInterval(playOnce, duration * 1000)
+  signal.addEventListener('abort', () => clearInterval(timer), { once: true })
+}
+
+/**
+ * Play the audio with `playback: AnimationSoundPlayback.Loop`.
+ * The sound loops continuously within each animation cycle.
+ * When a new cycle starts, playback is reset to the beginning.
+ * This prevents overlapping between cycles.
+ */
+function playAudioWithPlaybackLoop(audio: HTMLAudioElement, duration: number, signal: AbortSignal) {
+  function playFromStart() {
+    audio.currentTime = 0
+    audio.play()
+  }
+  audio.loop = true
+  audio.muted = mutedRef.value
+  audios.add(audio)
+  signal.addEventListener(
+    'abort',
+    () => {
+      audio.pause()
+      audios.delete(audio)
+    },
+    { once: true }
+  )
   playFromStart()
   const timer = setInterval(playFromStart, duration * 1000)
-  signal.addEventListener('abort', async () => {
-    clearInterval(timer)
-    audio.pause()
-    audioRef.value = null
-  })
+  signal.addEventListener('abort', () => clearInterval(timer), { once: true })
 }
 
 const activatedRef = useActivated()
@@ -93,7 +147,7 @@ watchEffect(async () => {
   if (costumesPlayer == null) return
   try {
     const signal = ctrl.signal
-    const { costumes, sound, duration } = props
+    const { costumes, sound, soundPlayback, duration } = props
     const [, audio] = await Promise.all([
       costumesPlayer.load(costumes, duration, signal),
       sound != null ? loadAudio(sound, signal) : null
@@ -101,7 +155,13 @@ watchEffect(async () => {
     signal.throwIfAborted()
 
     costumesPlayer.play(signal)
-    if (audio != null) playAudio(audio, duration, signal)
+    if (audio != null) {
+      if (soundPlayback === AnimationSoundPlayback.Once) {
+        playAudioWithPlaybackOnce(audio, duration, signal)
+      } else if (soundPlayback === AnimationSoundPlayback.Loop) {
+        playAudioWithPlaybackLoop(audio, duration, signal)
+      }
+    }
   } catch (e) {
     ctrl.abort(e)
     capture(e, 'load and play animation failed')
diff --git a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
index c140bbdcb..cd6addfae 100644
--- a/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
+++ b/spx-gui/src/components/editor/sprite/animation/SoundEditor.vue
@@ -2,11 +2,11 @@
   <UIDropdownForm
     v-radar="{ name: 'Sound editor dropdown form', desc: 'Dropdown form for selecting animation sound' }"
     :title="$t(actionName)"
-    style="width: 320px; max-height: 400px"
+    style="width: 408px; max-height: 400px"
     @cancel="emit('close')"
     @confirm="handleConfirm"
   >
-    <ul class="flex-[1_1_0] flex flex-wrap content-start gap-3">
+    <ul class="flex-[1_1_0] flex flex-wrap content-start gap-2">
       <SoundItem
         v-for="sound in editorCtx.project.sounds"
         :key="sound.id"
@@ -42,13 +42,63 @@
         </UIMenu>
       </UIDropdown>
     </ul>
+    <template #footer-left>
+      <div v-if="selected != null" class="flex h-8 items-center gap-2">
+        <span class="text-base text-grey-900">
+          {{ $t({ en: 'Playback', zh: '播放' }) }}
+        </span>
+        <UITooltip>
+          {{
+            $t(
+              selectedPlayback === AnimationSoundPlayback.Loop
+                ? {
+                    en: 'Loop the sound during each animation playback and stop it when the animation stops',
+                    zh: '声音在动画的单次播放周期内循环播放，并在动画停止时停止'
+                  }
+                : {
+                    en: 'Play the sound once and let it complete independently of the animation',
+                    zh: '声音播放一次，并独立于动画完整播放'
+                  }
+            )
+          }}
+          <template #trigger>
+            <UISelect
+              v-radar="{
+                name: 'Animation sound playback selector',
+                desc: 'Select how the selected sound plays with the animation'
+              }"
+              :value="selectedPlayback"
+              class="min-w-[80px]"
+              @update:value="handlePlaybackUpdate"
+            >
+              <UISelectOption :value="AnimationSoundPlayback.Once">
+                {{ $t({ en: 'Once', zh: '一次' }) }}
+              </UISelectOption>
+              <UISelectOption :value="AnimationSoundPlayback.Loop">
+                {{ $t({ en: 'Loop', zh: '循环' }) }}
+              </UISelectOption>
+            </UISelect>
+          </template>
+        </UITooltip>
+      </div>
+    </template>
   </UIDropdownForm>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { Animation } from '@/models/spx/animation'
-import { UIDropdownForm, UIDropdown, UIMenu, UIMenuItem, UIBlockItem, UIIcon } from '@/components/ui'
+import { AnimationSoundPlayback, type Animation } from '@/models/spx/animation'
+import {
+  UIDropdownForm,
+  UIDropdown,
+  UIMenu,
+  UIMenuItem,
+  UIBlockItem,
+  UIIcon,
+  UISelect,
+  UISelectOption,
+  UITooltip
+} from '@/components/ui'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
 import SoundItem from '@/components/editor/stage/sound/SoundItem.vue'
 import { useAddAssetFromLibrary, useAddSoundFromLocalFile, useAddSoundByRecording } from '@/components/asset'
@@ -67,8 +117,16 @@ const editorCtx = useEditorCtx()
 
 const actionName = { en: 'Select sound', zh: '选择声音' }
 const selected = ref(props.animation.sound)
+const selectedPlayback = ref(props.animation.soundPlayback)
+
+function handlePlaybackUpdate(playback: string | null) {
+  if (playback !== AnimationSoundPlayback.Once && playback !== AnimationSoundPlayback.Loop) return
+  selectedPlayback.value = playback
+}
+
 async function handleSoundClick(sound: string) {
-  selected.value = selected.value === sound ? null : sound
+  if (selected.value === sound) selected.value = null
+  else selected.value = sound
 }
 
 const addFromLocalFile = useAddSoundFromLocalFile()
@@ -102,7 +160,10 @@ const handleRecord = useMessageHandle(
 ).fn
 
 async function handleConfirm() {
-  await editorCtx.state.history.doAction({ name: actionName }, () => props.animation.setSound(selected.value))
+  await editorCtx.state.history.doAction({ name: actionName }, () => {
+    props.animation.setSound(selected.value)
+    props.animation.setSoundPlayback(selectedPlayback.value)
+  })
   emit('close')
 }
 </script>
diff --git a/spx-gui/src/components/ui/UIDropdownForm.vue b/spx-gui/src/components/ui/UIDropdownForm.vue
index f2273a4c9..11b9c8238 100644
--- a/spx-gui/src/components/ui/UIDropdownForm.vue
+++ b/spx-gui/src/components/ui/UIDropdownForm.vue
@@ -14,21 +14,26 @@
     <main class="flex-auto min-h-0 overflow-y-auto px-4 py-3">
       <slot></slot>
     </main>
-    <footer class="flex-none flex justify-end gap-3 p-4">
-      <UIButton
-        v-radar="{ name: 'Cancel button', desc: 'Click to cancel the operation in dropdown' }"
-        type="neutral"
-        @click="emit('cancel')"
-      >
-        {{ $t({ en: 'Cancel', zh: '取消' }) }}
-      </UIButton>
-      <UIButton
-        v-radar="{ name: 'Confirm button', desc: 'Click to submit the dropdown' }"
-        type="primary"
-        html-type="submit"
-      >
-        {{ $t({ en: 'Confirm', zh: '确认' }) }}
-      </UIButton>
+    <footer class="flex-none flex items-center justify-between gap-3 p-4">
+      <div class="min-w-0 flex items-center">
+        <slot name="footer-left"></slot>
+      </div>
+      <div class="flex justify-end gap-3">
+        <UIButton
+          v-radar="{ name: 'Cancel button', desc: 'Click to cancel the operation in dropdown' }"
+          type="neutral"
+          @click="emit('cancel')"
+        >
+          {{ $t({ en: 'Cancel', zh: '取消' }) }}
+        </UIButton>
+        <UIButton
+          v-radar="{ name: 'Confirm button', desc: 'Click to submit the dropdown' }"
+          type="primary"
+          html-type="submit"
+        >
+          {{ $t({ en: 'Confirm', zh: '确认' }) }}
+        </UIButton>
+      </div>
     </footer>
   </form>
 </template>
diff --git a/spx-gui/src/models/spx/animation.test.ts b/spx-gui/src/models/spx/animation.test.ts
index d1f80c052..1b6339009 100644
--- a/spx-gui/src/models/spx/animation.test.ts
+++ b/spx-gui/src/models/spx/animation.test.ts
@@ -1,12 +1,12 @@
 import { nextTick } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 import { delayFile } from '@/utils/test'
-import { fromText, type Files } from '../common/file'
+import { fromText, toConfig, type Files } from '../common/file'
 import { SpxProject } from './project'
 import { Sprite } from './sprite'
 import { Costume } from './costume'
 import { Sound } from './sound'
-import { Animation } from './animation'
+import { Animation, AnimationSoundPlayback } from './animation'
 
 vi.mock('@/apis/aigc', async (importOriginal) => ({
   ...(await importOriginal<typeof import('@/apis/aigc')>()),
@@ -130,32 +130,30 @@ describe('Animation', () => {
     expect(exportedId).toBeUndefined()
   })
 
-  // Temporary skip until goplus/spx#1574 is fixed and animation export switches back from onStart to onPlay.
-  it.skip('should export sound binding using onPlay', () => {
+  it('should export once sound playback using onStart', () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
     animation.setSound(project.sounds[0].id)
 
     const [config] = animation.export('', { sounds: project.sounds })
-    expect(config.onPlay).toEqual({ play: project.sounds[0].name, loop: false })
-    expect(config.onStart).toBeUndefined()
+    expect(config.onStart).toEqual({ play: project.sounds[0].name })
+    expect(config.onPlay).toBeUndefined()
   })
 
-  // Temporary skip until goplus/spx#1574 is fixed and animation export switches back from onStart to onPlay.
-  it.skip('should export loop: true in onPlay when soundLoop is true', () => {
+  it('should export loop sound playback using onPlay', () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
     animation.setSound(project.sounds[0].id)
-    animation.setSoundLoop(true)
+    animation.setSoundPlayback(AnimationSoundPlayback.Loop)
 
     const [config] = animation.export('', { sounds: project.sounds })
-    expect(config.onPlay).toEqual({ play: project.sounds[0].name, loop: true })
+    expect(config.onPlay).toEqual({ play: project.sounds[0].name })
+    expect(config.onStart).toBeUndefined()
   })
 
-  // Temporary skip until goplus/spx#1574 is fixed and animation export switches back from onStart to onPlay.
-  it.skip('should load soundLoop from onPlay.loop', () => {
+  it('should load loop sound playback from onPlay', () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const costumes = sprite.costumes
@@ -166,16 +164,16 @@ describe('Animation', () => {
       {
         frameFrom: costumes[0].name,
         frameTo: costumes[0].name,
-        onPlay: { play: sounds[0].name, loop: true }
+        onPlay: { play: sounds[0].name }
       },
       costumes,
       { sounds }
     )
     expect(animation.sound).toBe(sounds[0].id)
-    expect(animation.soundLoop).toBe(true)
+    expect(animation.soundPlayback).toBe(AnimationSoundPlayback.Loop)
   })
 
-  it('should default soundLoop to false when loop field is absent', () => {
+  it('should load once sound playback from onStart', () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const costumes = sprite.costumes
@@ -186,45 +184,62 @@ describe('Animation', () => {
       {
         frameFrom: costumes[0].name,
         frameTo: costumes[0].name,
-        onPlay: { play: sounds[0].name }
+        onStart: { play: sounds[0].name }
       },
       costumes,
       { sounds }
     )
-    expect(animation.soundLoop).toBe(false)
+    expect(animation.soundPlayback).toBe(AnimationSoundPlayback.Once)
   })
 
-  it('should load sound binding from legacy onStart for backward compatibility', () => {
+  it('should preserve once sound playback through project export and load', async () => {
     const project = makeProject()
-    const sprite = project.sprites[0]
-    const costumes = sprite.costumes
-    const sounds = project.sounds
+    const animation = project.sprites[0].animations[0]
+    animation.setSound(project.sounds[0].id)
 
-    const [animation] = Animation.load(
-      'default',
-      {
-        frameFrom: costumes[0].name,
-        frameTo: costumes[0].name,
-        onStart: { play: sounds[0].name }
-      },
-      costumes,
-      { sounds }
-    )
-    expect(animation.sound).toBe(sounds[0].id)
-    expect(animation.soundLoop).toBe(false)
+    const { metadata, files } = await project.export()
+    const spriteConfig = (await toConfig(files['assets/sprites/MySprite/index.json']!)) as {
+      fAnimations: Record<string, { onPlay?: unknown; onStart?: unknown }>
+    }
+    expect(spriteConfig.fAnimations.default.onStart).toEqual({ play: project.sounds[0].name })
+    expect(spriteConfig.fAnimations.default.onPlay).toBeUndefined()
+
+    const newProject = new SpxProject()
+    await newProject.load({ metadata, files })
+    expect(newProject.sprites[0].animations[0].sound).toBe(newProject.sounds[0].id)
+    expect(newProject.sprites[0].animations[0].soundPlayback).toBe(AnimationSoundPlayback.Once)
+  })
+
+  it('should preserve loop sound playback through project export and load', async () => {
+    const project = makeProject()
+    const animation = project.sprites[0].animations[0]
+    animation.setSound(project.sounds[0].id)
+    animation.setSoundPlayback(AnimationSoundPlayback.Loop)
+
+    const { metadata, files } = await project.export()
+    const spriteConfig = (await toConfig(files['assets/sprites/MySprite/index.json']!)) as {
+      fAnimations: Record<string, { onPlay?: unknown; onStart?: unknown }>
+    }
+    expect(spriteConfig.fAnimations.default.onPlay).toEqual({ play: project.sounds[0].name })
+    expect(spriteConfig.fAnimations.default.onStart).toBeUndefined()
+
+    const newProject = new SpxProject()
+    await newProject.load({ metadata, files })
+    expect(newProject.sprites[0].animations[0].sound).toBe(newProject.sounds[0].id)
+    expect(newProject.sprites[0].animations[0].soundPlayback).toBe(AnimationSoundPlayback.Loop)
   })
 
   it('should clone well', () => {
     const project = makeProject()
     const sprite = project.sprites[0]
     const animation = sprite.animations[0]
-    animation.setSoundLoop(true)
+    animation.setSoundPlayback(AnimationSoundPlayback.Loop)
     const clonedAnimation = animation.clone()
     expect(clonedAnimation.id).not.toBe(animation.id)
     expect(clonedAnimation.name).toBe(animation.name)
     expect(clonedAnimation.duration).toBe(animation.duration)
     expect(clonedAnimation.sound).toBe(animation.sound)
-    expect(clonedAnimation.soundLoop).toBe(animation.soundLoop)
+    expect(clonedAnimation.soundPlayback).toBe(animation.soundPlayback)
     expect(clonedAnimation.costumes.length).toBe(animation.costumes.length)
     for (let i = 0; i < clonedAnimation.costumes.length; i++) {
       expect(clonedAnimation.costumes[i].id).not.toBe(animation.costumes[i].id)
diff --git a/spx-gui/src/models/spx/animation.ts b/spx-gui/src/models/spx/animation.ts
index a29968456..1b3abadc7 100644
--- a/spx-gui/src/models/spx/animation.ts
+++ b/spx-gui/src/models/spx/animation.ts
@@ -1,31 +1,35 @@
 import { reactive } from 'vue'
+import { nanoid } from 'nanoid'
 
 import { Disposable } from '@/utils/disposable'
 import { ensureValidCostumeName, getAnimationName, validateAnimationName } from './common/asset-name'
 import type { Files } from '../common/file'
 import type { Costume, RawCostumeConfig, Pivot as CostumePivot } from './costume'
 import type { Sprite } from './sprite'
-import { nanoid } from 'nanoid'
 import type { Sound } from './sound'
 
 type ActionConfig = {
   /** Sound name to play */
   play?: string
-  /** Whether to loop the sound; for onStart defaults to false, for onPlay defaults to true */
-  loop?: boolean
   // not supported by builder:
   costumes?: unknown
 }
 
 export const defaultFps = 10
 
+export enum AnimationSoundPlayback {
+  /** Play once and let the sound complete independently of the animation. */
+  Once = 'once',
+  /** Loop during each animation playback and stop when the animation stops. */
+  Loop = 'loop'
+}
+
 export type AnimationInits = {
   id?: string
   /** Duration (in seconds) for animation to be played once */
   duration?: number
   sound?: string
-  /** Whether to loop the sound; defaults to false */
-  soundLoop?: boolean
+  soundPlayback?: AnimationSoundPlayback
 }
 
 export type RawAnimationConfig = {
@@ -108,10 +112,9 @@ export class Animation extends Disposable {
     this.sound = soundId
   }
 
-  /** Whether to loop the sound when played; defaults to false */
-  soundLoop: boolean
-  setSoundLoop(loop: boolean) {
-    this.soundLoop = loop
+  soundPlayback: AnimationSoundPlayback
+  setSoundPlayback(playback: AnimationSoundPlayback) {
+    this.soundPlayback = playback
   }
 
   constructor(name: string, inits?: AnimationInits) {
@@ -120,7 +123,7 @@ export class Animation extends Disposable {
     this.costumes = []
     this.duration = inits?.duration ?? 0
     this.sound = inits?.sound ?? null
-    this.soundLoop = inits?.soundLoop ?? false
+    this.soundPlayback = inits?.soundPlayback ?? AnimationSoundPlayback.Once
     this.id = inits?.id ?? nanoid()
 
     return reactive(this) as this
@@ -131,7 +134,7 @@ export class Animation extends Disposable {
       id: preserveId ? this.id : undefined,
       duration: this.duration,
       sound: this.sound ?? undefined,
-      soundLoop: this.soundLoop
+      soundPlayback: this.soundPlayback
     })
     const costumes = this.costumes.map((c) => c.clone(preserveId))
     animation.setCostumes(costumes)
@@ -180,22 +183,27 @@ export class Animation extends Disposable {
     if (isLoop != null) console.warn(`unsupported field: isLoop for animation ${name}`)
     if (anitype != null) console.warn(`unsupported field: anitype for animation ${name}`)
     let soundId: string | undefined = undefined
-    let soundLoop = false
-    // onPlay is the current API; onStart is legacy for backward compatibility
-    const soundName = onPlay?.play ?? onStart?.play
+    let soundPlayback = AnimationSoundPlayback.Once
+    let soundName: string | undefined = undefined
+    if (onPlay?.play != null) {
+      soundName = onPlay.play
+      soundPlayback = AnimationSoundPlayback.Loop
+    } else if (onStart?.play != null) {
+      soundName = onStart.play
+      soundPlayback = AnimationSoundPlayback.Once
+    }
     if (soundName != null) {
       const sound = sounds.find((s) => s.name === soundName)
       if (sound == null) console.warn(`Sound ${soundName} not found when creating animation ${name}`)
       else {
         soundId = sound.id
-        soundLoop = onPlay?.loop ?? false
       }
     }
     const animation = new Animation(name, {
       id: includeId ? id : undefined,
       duration,
       sound: soundId,
-      soundLoop
+      soundPlayback
     })
     const animationCostumeNames = animationCostumes.map((c) => c.name)
     for (const costume of animationCostumes) {
@@ -230,9 +238,8 @@ export class Animation extends Disposable {
     }
     const soundName = sounds.find((s) => s.id === this.sound)?.name
     if (soundName != null) {
-      // Revert to legacy onStart temporarily. For details, see https://github.com/goplus/builder/issues/3172
-      // TODO: Use `onPlay` instead of `onStart` and pass loop after goplus/spx#1574 resolved and spx updated.
-      config.onStart = { play: soundName }
+      if (this.soundPlayback === AnimationSoundPlayback.Loop) config.onPlay = { play: soundName }
+      else config.onStart = { play: soundName }
     }
     if (includeId) config.builder_id = this.id
     return [config, costumeConfigs, files]