...

View Full Version : Need Help With Playing Audio



New World
07-27-2011, 05:49 PM
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:


<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag').play();
}
</script>



And the body:


<div id="audio">
<audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio>
</div>


And now to actually play the audio:


<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??

nomanic
07-27-2011, 11:59 PM
Try this -



<script type="text/javascript">
function play_single_sound(dv) {
document.getElementById(dv).play();
}
</script>



And the body:


<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:


<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

dgreenhouse
07-28-2011, 12:44 AM
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.)



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum