I have a site which has many illustrations. I would like for there to be sound but the browser doesn't allow you to autoplay sounds. So at some point the user has to click.

I also have a second sound, the reading of a poem. I would somehow like for there to be a button or some way of turning on the poem audio.

What are some design UX ideas for accomplishing this without just plastering a > play button on the screen? For both the background sound, and the poem narration.


As the site deals with illustrations and both actions are about listening, you can use some illustrated icons to group the two possibilities in a button at the bottom corner of the screen:

enter image description here



Use the loading time to inform the user about the audio/other permissions that they might need to provide

If your website is interactive and has background audio that needs to play, inform the user while the site loads. I have come across many online portfolios of musicians, animators, front-end web developers, etc. who have background audio to enhance the viewing experience. They generally take longer to load due to the audio/video content and that is the best time to add information on the screen.

Let the user know that there's background music and give them the choice of enabling it. They might need to increase/decrease the volume, put on headphones or simply might not be in a place or situation where they can enjoy the full experience of the website. Information is key and it would actually retain the users on your site.

PS: Once the loading is complete, let there be a button to go to the site. That way, there's no click/button required later and the user is consciously enabling the audio

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.