www.webdeveloper.com
Results 1 to 8 of 8

Thread: Dynamically generated audio tag won't play sound in Safari

  1. #1
    Join Date
    Dec 2013
    Posts
    8

    Dynamically generated audio tag won't play sound in Safari

    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);
    }

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    try wav, mp3 or AAC for Safari
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Dec 2013
    Posts
    8
    Thank you for the response. I already tried them prior to posting.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,343
    HTML5 is not properly supported across the browsers and you have quirks as well like the container format may be MP4 but its whats in it that could be the issue.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Mar 2012
    Posts
    202
    Some browsers disable the auto-play of audio and video files, and will only allow the control to play when initiated by a user action (ie. onclick, onmouseover, etc.). This may be your issue.

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,343
    If you google about HTML5 video / audio, you will find that there is various issues relating to standards compliance coupled with support and patent encumbrance, so you may have an mp4 container but a stream that does not decode because it is not supported.

    A case of having a look in the tin, the best thing to do is to transcode the format in to OggVorbis formats that are supported and not patent encumbered.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Dec 2013
    Posts
    8
    Thanks all, it turns out it was some anomolous issue with my IDE. I was using WebStorm and when I launched from the browser from the IDE it would not play that file in Safari. I have no idea why but I guess it really doesn't matter. Everything works fine in Production. I really appreciate the response. Pardon me but I have noticed some of the posts have been marked 'resolved'. Is this something I am supposed to do or the admin? Thanks again.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,343
    You would need to have a web server running on your computer, running from the IDE opens up the page locally from your hard drive, it is in a round about manner expecting to be a page served to it from a server.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles