Hi all! I am trying to play some audio. If I have this audio react element: ```audio { attrs { ...

# react

[Joost Klitsie]

Hi all! I am trying to play some audio. If I have this audio react element:

audio {
    attrs {
        src="sounds/time.mp3"
    }
}

How can I run play() on it? 🙂

[Joost Klitsie]

I can conditionally add/remove the element in conjunction with autoPlay to make it play/stop but it feels very dirty

if (viewState.playAudio) {
            audio {
                attrs {
                    src = "sounds/time.mp3"
                    autoPlay = true
                }

            }
        }

[Joost Klitsie]

btw I want to have my own controls

[Joost Klitsie]

Okay figured it out

ref {
                findDOMNode(it).asDynamic().play()
            }

[turansky]

Looks like you need create ref before

[Joost Klitsie]

audio {
    attrs {
        src = "sounds/time.mp3"
    }

    ref = createRef<Audio>().apply {
        useEffect(listOf(viewState.playAudio)) {
            if (viewState.playAudio) {
                current?.play()
            } else {
                current?.pause()
            }
        }
    }
}

@turansky something like this? 🙂

[turansky]

val audioRef = createRef<Audio>()
        useEffect(listOf(viewState.playAudio)) {
  val audio = audioRef.current!!
  if (viewState.playAudio) {
    audio.play()
  } else {
    audio.pause()
  }
}

// render
audio {
    ref = audioRef
    attrs {
        src = "sounds/time.mp3"
    }
}

[Joost Klitsie]

Ah because it would recreate the ref otherwise. I will then use a state or something (I have a functional component)

[Joost Klitsie]

val audioRef = useState {
                createRef<Audio>()
            }.first.apply {
                useEffect(listOf(viewState.playAudio)) {
                    if (viewState.playAudio) {
                        current?.play()
                    } else {
                        current?.pause()
                    }
                }
            }
            ref = audioRef