TIL: Adding voice to claude artifacts

Using browser's built-in Web Speech API that converts text to speech one can add voice to claude artifacts.

TILClaudeVoiceWeb Speech APIText-to-Speech
Published: 2025-03-25
  • I was browsing interesting claude artifacts and found this nice pomodoro app in japanese language
  • Using a similar approach, I created a playground to play with different available voices
  • Then, I created a simple breathing guidance app
  • And another app that plays ambient music (I couldn't make claude work after this, plans were to add visualisation of oscillation patterns)
  • One thing I realised was, its better to test and develop each component, functionality or page separately, before integration into main app, to reduce reaching of context limit and keep things more contextual to improve accuracy.