I have searched everywhere for my problem and found some answers but didn't seem to work when I implemented it.
Here is my simple code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Audio Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
play_audio();
});
$(document).on("click", "#play-btn", function(){
play_audio();
});
function play_audio(){
var notify = document.getElementById("sound-notification");
notify.play();
}
</script>
</head>
<body>
<audio id="sound-notification" src="beep.ogg"></audio>
<button id="play-btn">Play</button>
hello world
</body>
</html>
There are two ways that I generate the audio sound, right after the page loads and when the user clicks on the button.
Everything works fine in FF and Chrome but not in Safari(i have version 5.1.7)
Im not sure if I have done anything wrong or what.
Any help will be much appreciated.
Thanks.
You should be using html5 doctype to make the page interpret this as HTML5 document.
<!doctype html>
and not what you have used like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
UPDATED CODE
<script type="text/javascript">
$(function() {
$(document).on("click", "#play-btn", function(){
play_audio();
});
function play_audio(){
var notify = document.getElementById("sound-notification");
notify.play();
}
});
</script>
I finally got it working...
<audio id="sound-notification">
<source scr="beep.ogg" type="audio/ogg"></source>
<source src="beep.mp3" type="audio/mpeg"></source>
</audio>
Hope this will help anyone.
This worked for me adding click sound on elements in all browsers on Drupal:
var snd = new Audio(Drupal.settings["basePath"] + "sites/all/themes/your_theme/click.ogg");
var sndSafari = new Audio(Drupal.settings["basePath"] + "sites/all/themes/your_theme/click.mp3");
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
jQuery('body a').click(function(){
if(is_safari){
sndSafari.play();
}else{
snd.play();
}
});
This is extra info just in case somebody needs it:
Firefox 3.5+ >> Supports .ogg, .wav
IE9+ >> Supports .mp3
Chrome 6+ >> Supports .ogg, .mp3, .mp4
Safari 5+ >> Supports .mp3, .mp4, .wav
Opera 10.5+ >> Supports .ogg, .wav
Make sure to add your sound path correctly (i was using drupal api)