Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help With Playing Audio

    I've got this JavaScript code that I'm using to play audio on my site made specifically for iPhones, iPods, and whatnot. However, my only problem is, that I can only pick one audio file to play from, no matter what. Can someone tell me what I'm doing wrong? I really need this specific code cause it allows me to play audio without going into the Media Player on the iPhone and iPod.

    Here's what I have in the head section:
    Code:
    <script type="text/javascript">
            function play_single_sound() {
                            document.getElementById('audiotag').play();
            }
    </script>
    And the body:
    Code:
    <div id="audio">
            <audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio>
    </div>
    And now to actually play the audio:
    Code:
    <a href="javascript:play_single_sound();">Play audio</a>
    I can play audio fine, but I'm only limited to one audio file per page. Is there anyway around this??

  • #2
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    Try this -

    Code:
    <script type="text/javascript">
            function play_single_sound(dv) {
                            document.getElementById(dv).play();
            }
    </script>
    And the body:
    Code:
    <div id="audio">
            <audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio>
            <audio id="audiotag2" src="audio2.wav" autobuffer="autobuffer"></audio>
            <audio id="audiotag3" src="audio3.wav" autobuffer="autobuffer"></audio>
            <audio id="audiotag4" src="audio4.wav" autobuffer="autobuffer"></audio>
    </div>
    And now to actually play the audio:
    Code:
    <a href="javascript:play_single_sound('audiotag');">Play audio 1</a>
    <a href="javascript:play_single_sound('audiotag2');">Play audio 2</a>
    <a href="javascript:play_single_sound('audiotag3');">Play audio 3</a>
    <a href="javascript:play_single_sound('audiotag4');">Play audio 4</a>
    where audio2.wav, audio3.wav, audio4.wav are your music files

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Even though it's a bit convoluted, this works...
    (Didn't do any x-browser compatibility; just FF and chrome.
    Don't know how this would work on mobile devices.)

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Play Audio</title>
    
    </head>
    
      <body>
      
        <div id="audio_parent">
          <audio id="audiotag">Audio</audio>
        </div>
        
        <ul>
          <li><a href="#" onclick="playAudio(1)">Audio 1 (beach.wav)</a></li>
          <li><a href="#" onclick="playAudio(2)">Audio 2 (hmpback1.wav)</a></li>
          <li><a href="#" onclick="playAudio(3)">Audio 3 (seashore1.wav)</a></li>
          <li><a href="#" onclick="pauseAudio()">Pause</a></li>
          <li><a href="#" onclick="continueAudio()">Continue</a></li>
          <li><a href="#" onclick="stopAudio()">Stop</a></li>
        </ul>
        <script>
        
          wavs =  new Array();
          wavs.push('beach1.wav')
          wavs.push('hmpback1.wav');
          wavs.push('seashore1.wav');
    			
          function playAudio(i)
          {
            var audiotag = document.getElementById('audiotag');
    				
            audiotag.src = wavs[i-1];
            audiotag.play();
          }
    			
          function pauseAudio()
          {
            var audiotag = document.getElementById('audiotag');
            audiotag.pause();
          }  
    			
          function continueAudio()
          {
            var audiotag = document.getElementById('audiotag');
            audiotag.play();
          }  
    			
          function stopAudio()
          {
            // I'm sure there's an easier way to do this
            // Couldn't find a stop() method
            // If you just add the removed object back; versus a clone,
            // the currentSrc propery still holds the most recently played
            // audio file even though the src property was cleared.
            // currentSrc doesn't seem to be accessible. Adding a clone in
            // seems to do the trick. You could obviously just create a new node
            // with the properties of the old node, but that's even more work.
    
            var audiotag = document.getElementById('audiotag');
            audiotag.src = '';
            var parent = audiotag.parentNode;
            var removed = parent.removeChild(audiotag);
            var clone = removed.cloneNode();
            parent.appendChild(clone);
          }
    
        </script>
      </body>
    </html>


  •  

    LinkBacks (?)


    Posting Permissions

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