Hello Everyone,

Had a really great response on my last issue so I'm back. I developed a website using Django CMS. The cms automatically removes certain tags and attributes so I wrote a script to dynamically create audio elements when the user clicks on specific links. Each sound is only a couple seconds long so there is no need for controls. I just wanted the audio element created and removed when done. My script works in all browsers with the exception of Safari. (Oh yes, I have not test IE; bound to be issues there.) Looking at the console in Safare everything seems to have been created, but I cannot hear any sound. If anyone can give me some pointers I'd appreciate it. Thanks

var link = document.querySelectorAll('a');

for (var i = 0; i < link.length; i++)
{
link[i].addEventListener('click', function(e) {

e.preventDefault();
var filePath = e.target.getAttribute('name');

// create player
var audioPlayer = document.createElement('audio');

// src mp4
var srcMp4 = document.createElement('source');
srcMp4.src = filePath.substr(0, filePath.length) + '.m4a';
srcMp4.type = 'audio/mp4';
audioPlayer.appendChild(srcMp4);

// src oga
var srcOga = document.createElement('source');
srcOga.src = filePath.substr(0, filePath.length) + '.oga';
srcOga.type = 'audio/ogg';
audioPlayer.appendChild(srcOga);

// append & play
document.body.appendChild(audioPlayer);
audioPlayer.play();

audioPlayer.addEventListener('ended', function() {
audioPlayer.parentNode.removeChild(audioPlayer);
});

}, false);
}