refactor(audio-player): extract inline events implementation from JSX for readability

[alamenai]

What

In the AudioPlayer component, the events logic are defined directly within the JSX.

While this works technically, it reduces readability and makes testing more difficult, as developers may struggle to understand the component’s structure and the relationship between the code and the UI.

Additionally, we were checking the negated condition before the positive one in this part of the code:

if (!player.isPlaying) {
  player.play()
} else {
  player.pause()
}

ESLint detects this as an issue with the no-negated-condition rule.

It’s recommended to check the positive condition first:

if (player.isPlaying) {
  player.pause()
} else {
  player.play()
}

[vercel]

@alamenai is attempting to deploy a commit to the ElevenLabs Team on Vercel.

A member of the Team first needs to authorize it.