How to prevent Safari from autoplaying HTML5 audio element

Question

I am using Safari version 5.1.7 (7534.57.2) and Windows 8.1

I have a webpage that contains the following HTML:

<audio controls >
    <source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3" type="audio/mpeg">
    <source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.ogg" type="audio/ogg">
    <embed height="50" width="100" src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3">
</audio>

When I open this page in Chrome, IE, Firefox, and Opera the audio does 'not' play (most browsers automute the volume as well). However, under Safari it automatically plays.

How do I prevent the quicktime player in Safari from autoplaying the audio file when the page loads?

I want the user to have a choice about clicking the play button.

It looks like testing Safari on Windows might be a mistake per this article theverge.com/2012/7/25/3186086/… — nu everest

Shiva Shiva · Accepted Answer · 2014-05-28T17:31:47

You can try setting the preload attribute like this

<audio controls preload="metadata" >
    <source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3" type="audio/mpeg">
    <source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.ogg" type="audio/ogg">
    <embed height="50" width="100" src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3">
</audio>

How to prevent Safari from autoplaying HTML5 audio element

1 Answers