JavaScript - Html5/js Plays Only Audio...

Hi,
yes I have 2 questions up related to audio!
Not sure Javascript is the problem.
I am trying 2 completely different methods. Either would be OK if they worked.
With this method the audio works fine testing locally in the browser, popping up a window with a helper player BUT when on the site it opens the window which then downloads the mp3 instead of playing it.
http://museum.spps.org/pop_up_audio.html

This is the script Code:

<script>
<!--
function wopen(url, name, w, h)
{
// Fudge factors for window decoration space.
 // In my tests these work well on all platforms & browsers.
w += 32;
h += 96;
 var win = window.open(url,
  name, 
  'width=' + w + ', height=' + h + ', ' +
  'location=no, menubar=no, ' +
  'status=no, toolbar=no, scrollbars=no, resizable=no');
 win.resizeTo(w, h);
 win.focus();
}
// -->
</script>

This is the code for the link text Code:

<a href= "uploads/2ndGraders.mp3" rel="nofollow" target="popup"
 onClick="wopen('uploads/2ndGraders.mp3', 'popup', 350, 150); return false;">
2nd Graders talk about Museum Magnet</a>

hope someone can help. I am not a javascripter, I just hunted down a couple of things that looked like they might work.
thanks
Mark

I want to know how to move a character on the path when you click the left or right arrow, but also when the left arrow is clicked it will switch between 4 images, making it look as though the characters is actually walking
left arrow = moves character to left on the path(walks to the left)
right arrow = moves character to right on the path(walks to the right)
up arrow = character jumps
This is my original code, it draws a path something like this \____
........................................................................................\



Code:

function drawMap(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('map');
 
  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){
 
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
 
    // Stroked Path
    ctx.beginPath();
    ctx.moveTo(0,70);
    ctx.lineTo(45,115);
    ctx.lineTo(250,115);
    ctx.lineTo(300,135);
    ctx.stroke();
    ctx.closePath();
 
  } else {
    alert('Your broswer does not support Canvas, We recommend getting the latest version of google chrome for the best quality');
  }
}

Can anyone point me in the right direction?

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

Heya peeps
So I'm in the process of building a website where audio can be purchased and downloaded.
I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle.
Is there a way of doing it?
All I want is a basic play/pause/stop button. To control a piece of sound.
Thanks

I'm keen to know what you guys think of this. In order to have HTML5 semantics and support for older browsers without Javascript enable I've written a little script that changes classes into node. For example <div class="nav"> would become <nav class="nav">

Code:

//Adapt page to HTML5
    function changeNodeName(element, newNodeName) {
        var oldNode = element,
			    newNode = document.createElement(newNodeName),
			    node,
			    nextNode;

        node = oldNode.firstChild;
        while (node) {
            nextNode = node.nextSibling;
            newNode.appendChild(node);
            node = nextNode;
        }
        for (var i = 0; i < oldNode.attributes.length; i++) {
            newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
        }
        
        oldNode.parentNode.replaceChild(newNode, oldNode);
    }
    try {
        var theBody = document.getElementsByTagName("body")[0];
        var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
        for (var i = 0; i < classNames.length; i++) {
            htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
            for (var ii = 0; ii < htmlFourElements.length; ii++) {
                changeNodeName(htmlFourElements[ii], classNames[i]);
            }
        }
    } catch(e) {
        console.error(e.message);
    }

Let me know what you think

I want to have an example on web storage.

I have an index.html page. On this page, there is a button which will go to another page, that is page1.html. On this page now, there is another button which will go to page2.html if clicked.

Index.html > page1.html > page2.html

Suppose if a user has already visited page2.html on the first time, how to make him/her goes directly on page2.html after clicking the button on index.html? The user must not again go to page1.html to get page2.html because he/she has already done that.

I want to know how to store page sessions with HTML5 so that the user gets on his/her last visited page when he/she clicks the button.

Thank.

hey there, i am making a slideshow site, a user can add effects to pictures using a drop down menu and choose a sound to accompany picture when the slideshow runs.

i have hit a snag, my function is taking in the choice from the user for both sounds, but playing them over one another, i think its something silly im missing out. here is the function where i think im going wrong:

Code:

function EvalSound()
	{
    var sound1 = document.getElementById("sound1");
		var choice = sound1.options[sound1.selectedIndex].value; 
		 var sound2 = document.getElementById("sound2");
		var choice2 = sound2.options[sound2.selectedIndex].value;
		var pic1 =   document.getElementById("first_pic");
		var pic2 =   document.getElementById("second_pic");
	
		soundManager.play(choice);
    soundManager.play(choice2);
	}

Thanks for any help

Hey guys, i havent got any code and im not asking for any! just wondering if anyone knows some good tutorials on vectors and how i can use them to store audio files! thanks in advance!

Hi everyone,

I'm an animator just beginning to learn the unity game engine. In other words, I know almost no JavaScript and would like to learn the basics in parallel with working on my project. I would ultimately like to create a scene in which I can use the spectrum of a sound track to drive certain properties of objects in the scene. I started off by following this spectrumAnalyser tutorial which I then expanded for 21 cubes. This was working pretty well, but the higher frequencies looked like they needed much more of the spectrum than the lower. I asked a coder colleague (more proficient in c# than js) for his help in expanding the code to analyse the full spectrum. He showed me a really nice way to assign various parts of the spectrum to each cube in the scene using a fibonacci sequence to gradualy assign more and more of the spectrum to the cubes that were to be driven by those frequencies. So as you can see I commented out some chunks of now redundant code (its a bit of an unfinished mess but I've left them in so you can kind of see what i was trying to do). However this new technique now doesn't actually drive the cubes anymore and my friend doesn't understand why. Maybe somthing to do with the AudioListener.GetSpectrumData? I was wondering if any of you guys could point me in the right direction. This is what we have now:

-----------------------------

#pragma strict

function Start () {

}

function Update () {
//var Audio : AudioListener;
//var spectrum : float [] = Audio.GetOutputData;
//AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming);
var spectrum : float[] = AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming);

var cubeList : float [];

cubeList[0] = spectrum[1];
cubeList[1] = spectrum[2];
cubeList[2] = spectrum[3];

var index : int = 3;
var fibonacci : int = 1;
var fibonacciIncrease : int = 1;
for(var i : int = 3; i < 21;++i)
{
cubeList[i] = 0;
var maxIndex : int = index + fibonacci;
while (index < maxIndex)
{
cubeList[i] = cubeList[i] + spectrum[index];
++index;
}
fibonacci = fibonacci + fibonacciIncrease;
fibonacciIncrease++;
}

/*
var c6 : float = spectrum[7] + spectrum[8] + spectrum[9] + spectrum[10];
var c7 : float = spectrum[11] + spectrum[12] + spectrum[13] + spectrum[14] + spectrum[15] + spectrum[16] + spectrum[17];
var c8 : float = spectrum[18] + spectrum[19] + spectrum[20] + spectrum[21] + spectrum[22] + spectrum[23] + spectrum[24] + spectrum[25] + spectrum[26] + spectrum[27] + spectrum[28];
var c9 : float = spectrum[29] + spectrum[30] + spectrum[31] + spectrum[32] + spectrum[33] + spectrum[34] + spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40] + spectrum[41] + spectrum[42] + spectrum[43] + spectrum[44];
var c10 : float = spectrum[66] + spectrum[67] + spectrum[68] + spectrum[69] + spectrum[70] + spectrum[71] + spectrum[72] + spectrum[73] + spectrum[74] + spectrum[75] + spectrum[76] + spectrum[77] + spectrum[78] + spectrum[79] + spectrum[80] + spectrum[81] + spectrum[82] + spectrum[83] + spectrum[84] + spectrum[85] + spectrum[86] + spectrum[87];
var c11 : float = spectrum[18] + spectrum[19];
var c12 : float = spectrum[20] + spectrum[21] + spectrum[22];
var c13 : float = spectrum[23] + spectrum[24] + spectrum[25];
var c14 : float = spectrum[26] + spectrum[27] + spectrum[28];
var c15 : float = spectrum[29] + spectrum[30] + spectrum[31];
var c16 : float = spectrum[32] + spectrum[33] + spectrum[34];
var c17 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c18 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c19 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c20 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40];
var c21 : float = spectrum[1000] + spectrum[1001] + spectrum[1002] + spectrum[1003] + spectrum[1004] + spectrum[1005] + spectrum[1006] + spectrum[1007] + spectrum[1008] + spectrum[1009] + spectrum[1010] + spectrum[1011];*/

var cubes : GameObject[] = GameObject.FindGameObjectsWithTag("CubeTag");

for(var k = 0; k < cubes.length; k++) {
switch (cubes[k].name) {
case 'c1': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c2': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c3': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c4': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c5': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c6': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c7': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c8': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c9': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c10': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c11': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c12': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c13': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c14': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c15': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c16': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c17': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c18': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c19': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c20': cubes[k].transform.localScale.y = cubeList[k]*10; break;
case 'c21': cubes[k].transform.localScale.y = cubeList[k]*10; break;

}
}
}


------------------------------


Many thanks for any help you can give, i'm off to learn some basics!

So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video.

What could I possibly be doing wrong?

Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4
JS: http://xonicgames.com/video/?i=6

Thanks

Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout?

http://www.javascriptkit.com/script/....shtml#current

I have a code that will randomly select a div from a list and inside of that div i want there to be a sound file. How would I use html5 and javascript to make it so that when a user clicks a button it would play whatever sound was associated with that button?


Code:

<div id="randomdiv1" class="article_example_div">
<embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed>
</div>

Hi there!
I found this code, in reply to someone's problem, on this forum.
I have altered it to my own needs, as it's an excellent piece of code.
However, I would like it to run under HTML5. I believe I need to add
"canvas" code to do the same??
I have already changed the doctype! HTML heading etc.,
Can anyone help?
Many, many thanks!!

Code:

<!doctype html>
<head>
<meta charset=UTF-8" />
<title>Crazy Rally - France</title>
<script type="text/javascript">
var frames = new Array();
	
//load frames into array
for(var i = 1; i < 417; i++){
	frames[i] = new Image(480,320);
	frames[i].src = "track" + i + ".png";
}

//playback
var currentFrameNumber = 1;
var fps = 30; // frames / second
const speed = 1000 / fps; // milliseconds
//var speed = 33;
      
function nextFrame( )
{
      	document.getElementById("display").src = frames[currentFrameNumber].src;
	currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
       	setTimeout( nextFrame, speed );
}
window.onload = nextFrame;
</script>
</head>
<body>
<img id="display" src="track1.png" width="480" height="320">
</body>
</html>

I run Windows 7 and IE9, and I believe IE9 supports HTML5 Local Storage. But when I run this offline (locally) in IE9

Code:

<script type="text/javascript">

function testSupport() {  
if (localStorage)  {return "Local Storage: Supported"}
else  {
return "Local Storage: NOT supported";  
}
} 

alert ( testSupport() );
</script>

I get "LocalStorage: NOT supported".

Chrome returns "Local Storage: Supported"

My DOCTYPE is <!DOCTYPE html>


Other tests also fail in IE. Example:

Code:

localStorage.setItem("name", "Hello World!"); 
alert(localStorage.getItem("name"));

Above works in Chrome.
Any advice, please? Have I not configured IE9 properly?

Hello,

I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on.

Thanks for help!

Here's a draft of what it looks like so far in the front end with my grids still in place:



HTML file:
Code:

<div id="slider" class="span-24 last">
            
                <div id="slide2Left"> &larr;</div>
                    <div id="slideFrame">
                        <div id="slideBoard">
                          <!-- the slides -->
                            <div class="slidePoint">
                             Slide 1 Goes Here
                            </div>
                            <div class="slidePoint">
                             Slide 2 Goes Here
                            </div>
                            <div class="slidePoint">
                             Slide 3 Goes Here
                            </div>
                          <!-- end slideBoard -->
                        </div>
                        <div id="slideReference"></div>
                    <!-- end slideFrame -->
                    </div>
<div id="slide2Right" class="last"> &rarr;</div>
                
        <!-- end slider section -->    
        </div>

Javascript code
Code:

// JavaScript Document
$(document).ready(function(){						
	var slideTime = 700;
	var currentSlide = 1;
	var totalSlides = $("#slideBoard > div").size();
	var slideWidth = $('#slideFrame').css('width');
	var slideAmount = parseInt(slideWidth);
	function slideLeft(){
		if(currentSlide > 1){
			$("#slideBoard").animate({
				left: ['+='+slideAmount, 'swing']
				}, slideTime );
			currentSlide += -1;
		}
	}
	function slideRight(){
		if(currentSlide < totalSlides){
			$("#slideBoard").animate({ 
				left: ['+=-'+slideAmount, 'swing']
				}, slideTime );
			currentSlide += 1;
		}
	}
	function slideTo(slideNumber){
		///*
		slideNumber = parseInt(slideNumber);
		slidePos = slideNumber -1;
		var p1 = $('#slideBoard');
		var position1 = p1.position();
		
		var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
		//alert(p2.html());
		var position2 = p2.position();
		var slideFor = 	(-position1.left) - position2.left;

		//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
		$("#slideBoard").animate({ 
			left: ['+='+slideFor, 'swing']
			}, slideTime );
		currentSlide = slideNumber;
		
		//*/
	}
	$('#slide2Left').click(function(){
		slideLeft();
	});
	$('#slide2Right').click(function(){
		slideRight();
	});
	
	$(document).keydown(function(e){
		 if(e.keyCode == 37){ 
			 //alert( "left pressed" );
			slideLeft();
			return false;
		 }
		 if(e.keyCode == 39){ 
			 //alert( "rigt pressed" );
			slideRight();
			return false;
		 }
	});

	//# Slide Reference Tool
	for(i = 1; i < (totalSlides+1); i++){
		$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
	}
	$('.slideNumber').click(function(){
		slideTo($(this).html());
	});
	$(".slidePoint").touchwipe({
     wipeLeft: function() { 	slideRight(); },
     wipeRight: function() { 	slideLeft(); },
     min_move_x: 20,
     preventDefaultEvents: true
	});
});

CSS Code
Code:

/* CSS Document */
					#slider {
						position: relative;
						margin: 79px 0 50px 0;
						height: 500px;
						padding-bottom: 50px;
						border-bottom: 1px solid #9B9B9B;
					}
					#slideFrame { 
						width:870px;
						left: 40px;
						min-height:460px;
						height:460px;
						overflow:hidden;
						position:relative;
						border:#CCC solid 0px;
					}
					#test { 
						width:30px; 
						min-height:460px;
						height:460px;
						overflow:hidden;
						position:relative;
						border:#CCC solid 0px;
					}
					#slideBoard {
						position:absolute;
						top:0px;
						left:0px;
						width:3000px;
						min-height:400px;	
						margin:0px;
						padding:0px;
						background: #ccc;
						opacity: .3;
					}
					.slidePoint {
						width:870px; 
						min-height:400px;
						height:410px;
						display:inline-block;
						margin:0px;
						padding:0xp;
						float:left;
					}
					.slidePoint p {
						padding:5px;
					}
					#slide2Left, #slide2Right{
						position:absolute;
						top: 200px;
						bottom: 5px;
						cursor:pointer;
						width:20px;
						height:20px;
						color:#9B9B9B;
						border:#9B9B9B solid 1px;
						border-radius: 5px;
						padding:3px;
						text-align:center;
						display: inline-block;
					}
					#slide2Right{
						left: 920px;
					}
					
					#slideReference {
						position:absolute;
						width: 770px;
						min-height:10px;
						bottom:5px;
						left:50px;
						text-align:center;
					}
					.slideNumber {
						border-radius: 2px;
						background:#929292;
						color:#ffffff;
						cursor:pointer;
						display:inline-block;
						padding:3px;
						margin:3px;
						text-align:center;
						min-height:15px;
						min-width:15px;
					}