The problem with the audio tag
Feb 27, 2012     06:50:00

I was faced with an interesting problem while adding the sound effects to locking and unlocking my iPhone in CSS3.

When I was trying to specify the "src" attribute of audio source tag it cause Safari overload and the browser stopped responding. Here is the code:

<audio id="soundLock" controls="true">
	<source src="/p/iphone/sound/lock.ogg" type="audio/ogg" />
	<source src="/p/iphone/sound/lock.mp3" type="audio/mpeg" />
</audio>

Solution was simple but not so obvious. I just added the full domain name to "src" attribute and the problem was solved. Code:

<audio id="soundLock" controls="true">
	<source src="http://tjrus.com/p/iphone/sound/lock.ogg" type="audio/ogg" />
	<source src="http://tjrus.com/p/iphone/sound/lock.mp3" type="audio/mpeg" />
</audio>

The interesting is that this code (first variant, without full domain name) I was using year ago in the other project with the iPhone. The same files and the same code and there was no problem with that. This time every modern browser except Safari working fine with the code.

Is this my mistake or Safari does something wrong?

Have you ever been faced with such a problem?


blog comments powered by Disqus