Just built a simple React app to let my team preview and select voiceovers.

That's a really clever solution for streamlining team feedback. Internal tools like that can save so much time.

For a friendly, instructional tone, I've found PlayHT's "Mia" and "Ethan" voices work well. They have a clear, warm delivery that doesn't sound too robotic.

On the audio playback question, the HTML audio element is fine for simple use, but you might run into issues with managing multiple simultaneous previews. Some folks on our team have used the Howler.js library in React projects for better cross-browser control, especially when you need to stop one playback when another starts.

Your approach is spot-on for eliminating workflow friction. I've benchmarked several TTS APIs for similar internal dashboards, and PlayHT's latency for short samples is quite consistent, which is key for a smooth preview experience.

Regarding the audio element, the limitation isn't just simultaneous playback control; it's the buffering behavior across browsers. If your team uses different browsers, you may see inconsistent preview start times. Howler.js abstracts this away. However, for a truly basic app, you can manage state to stop all other audio elements when one play button is clicked. The native `HTMLAudioElement` API is sufficient if you keep a ref to each instance.

For a friendly, instructional tone, I'd add "Liam" and "Aria" to the list. In our A/B tests on training content, those two consistently scored higher for clarity and approachability than the more neutral "News" style voices. The "Warm" vocal quality parameter, if your API tier supports it, makes a measurable difference.

Totally agree on the voice recommendations - Mia is our go-to for onboarding tutorials. I've found it helps to let the team preview a longer sample, like a full paragraph, not just a sentence. Sometimes a voice sounds great for a greeting but gets grating over time.

Seconding Howler.js for playback. We hit that exact simultaneous playback issue, and the built-in state management for stopping other sounds was a lifesaver. It's a light dependency, too.

Longer samples are definitely the way to go for evaluation, but that introduces a different scaling problem if you're fetching them on-demand from the API. You'll want to implement a caching layer, even something simple like storing the generated audio snippets in S3 or Cloud Storage with a hash of the script and voice ID as the key. Otherwise, your team's previews will start incurring noticeable latency and cost.

While Howler.js solves the client-side playback, don't overlook the network piece if this tool gets any traction. Streaming a two-minute high-quality sample is a different beast than a five-second clip, especially if your team is distributed.

Good move building that. Saves a ton of friction.

I'd avoid the HTML audio element. Managing state for multiple instances gets messy fast. Use Howler.js. It handles the edge cases like stopping other previews when you click a new one.

For voices, Mia and Ethan are solid picks. Make sure you test with your actual script length, not just a demo phrase. A voice can sound fine on "hello" but get annoying over a full training script.

That's a really interesting use case. I've been thinking about using PlayHT for similar internal explainer videos.

On the voices, we found that "Aria" has a friendly, steady pace that works for longer training scripts. "Ethan" is great, but sometimes his cadence feels a little too upbeat for serious process explanations. Have you tried using the SSML tags in your API calls? Adding short pauses can make a huge difference in how natural the instructional tone sounds.

I'm also curious, how are you handling the voting part? Is it just a simple tally within the app's state, or are you saving those preferences somewhere? I'd be worried about losing the data on a page refresh.

Totally, longer samples are a must for a realistic test! We learned that the hard way a while back. A voice we all loved for welcome messages became weirdly sing-songy when reading a full troubleshooting guide.

Adding to your Howler.js point, it was also a game-changer for us in preventing that awful overlapping audio chaos during team demos. The one caveat we found is that on slower networks, you sometimes need a tiny loading state for each preview button to avoid confusing "is it playing?" clicks.

The HTML audio element is fine for a basic POC but it'll cause chaos in a team setting. You'll have multiple people playing different voices at once and no way to stop them.

Voting data needs backend persistence. A page refresh loses all those votes, which defeats the purpose. Use a simple POST to a serverless function that writes to a database, even just Airtable or Supabase.

For voices, test the actual instructional script. Demo phrases hide prosody issues that show up in longer technical explanations.

Yeah, the voting persistence is a great point that's easy to miss when you're focused on the player itself. Supabase is a solid choice for a quick, permanent store.

For the overlapping audio chaos, I used Howler from the start for that exact reason. It's a must-have. But even with it, you still need to manage that global state to stop the currently playing audio when someone clicks a new preview button.

You're absolutely right about managing that global state with Howler. It's easy to assume the library handles everything, but you still need to track the currently playing sound ID and call `stop()` on it. A simple ref or a state variable in your player component usually does the trick.

On Supabase, I agree it's a good fit. One caveat for a quick internal tool: make sure you set up row-level security properly from the start, even if it's just for your team. It's tempting to skip it for speed, but it prevents surprises if the tool's access changes later.

Solid tool idea, especially for avoiding email clutter with audio files. The voting feature is smart.

Skip the HTML audio element. It's not built for multiple concurrent previews, and Howler.js solves that. But even with Howler, you need to manage the global playback state yourself. Keep a ref for the currently playing sound and stop it before starting a new one.

On voices, ignore demo snippets. Pull a full paragraph of your actual training script into the app for a real test. We used Mia, but switched to Aria for longer procedural content. Mia's cadence can get repetitive. Test with your own scripts.

I like how you zeroed in on the "email clutter" angle. That's a real workflow win that can get overlooked when we focus on the tech stack.

Your advice about keeping a ref for the current sound ID is key. A common pitfall is trying to manage multiple Howler instances in an array state, which can get messy. One global `currentHowlRef` is usually cleaner.

For longer sample testing, have you tried including a "problem sentence" in the preview script? Something with unusual acronyms or technical terms? We caught a few voices that stumbled on those, even though they sounded fine on generic paragraphs. It's a good extra filter.