JavaScript - Javascript + Html5 Audio Sequencer

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

I am new to javascript (I started learning it today) so please explain it for newbies.

I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video.

Then, I divide them to get the precentage which was buffered so far.

I have no problem storing the durating using:
Code:

var duration = document.getElementById('vid').duration

- returns "12.6" (seconds)


I am struggling with getting the buffered time. I tried:
Code:

var buffered = document.getElementById('vid').buffered

This one returns "[object TimeRanges]".
From what I understood this is some kind of an object (Like an array?).
I tried returning "buffered.length" and I get "1" back.

Please explain how I can do this. thanks

On all my html 5 pages of http://www.countyfairgrounds.net I have a drop down javascript menu for selecting a state. The thing has worked for years fine. However in switching to html5 the validator will not validate it. The are saying the option tag is obsolete. First I don't java, I do html5 and css3 currently. Ca anyonepoint me to a script dropdown that I can cut and paste - that will validate?

I can play a sound on my local machine using the following code, but when I upload to a server the same code it does not play. I cannot work out why, the link below gives the code. The multi channel code is he

http://www.storiesinflight.com/html5/audio.html

I installed Firebug and insepcted the Net components and can see that the .wav files are being sought out but returning a 404 error. This would be fine, however the path being sought is correct. Clicking link does'nt play the sound, but removing the file and paring back to the directory brings you to the directory on the server and clicking the file does play the sound. The code works locally, and I simply cannot see what could be causing the issue in the server versions on both Firefox and Chrome.

Sorry if this is the wrong forum for this question. I get confused about what forum to post a question in with regards to DHTML technologies since they are all frequently used together. Anyhoo, heres my question.

I've recently discovered an interesting behavior. When I mouse over a nested element it triggers the 'onmouseout' event handler of the parent element. Take the following code snippet, for instance:

Code:

 <table>
    <tr>
        <td onmouseout="window.alert('you moused out of td');">
            <img src="image0.gif" style="height:50px; width:50px;" />
        </td>
    </tr>
</table>

In the code snippet above, the 'onmouseout' event handler executes when you mouse over the image nested inside the <td> element.
I wouldn't have thought this would be the appropriate behavior since from my perspective the mouse is still inside the <td> element. Can someone make comments on this. Thank You.

Edit: I've discovered that mousing over a nested element causes both an 'onmouseout' and an 'onmouseover' event for the parent element. They are called back to back. Seems a little bit of an odd sequence of events but maybe it makes sense in the grand scheme of things. Yeah, right.

I want to use HTML5's audio coding similar to the one below:

Code:

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'horse.ogg');
audioElement.play();

In order to play sound files depending on the input. What I'm working on is a text-to-speech webapplication.

What I'd need to happen is for there to be an input and then allow the user to type anything into the input, so if they type in:

Hello, how are you doing?

Javascript or PHP will recognize each character and translate it into an audio sequence.

In example:

It'd detect the "H" in hello and play sound file "H.ogg"
It'd then detect the "E" in hello and play sound file "E.ogg"

I know there must be an easy way to do this.

Hi everyone,

I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed.

I have attached a picture as an example because its quite hard to explain!

Any help would be appreciated!

Thanks, Luke

How to make request "rtsp://localhost:554/sample_100kbit.mp4"? (in HTML5 or Javascript) I want to access video streaming data which source is present on Darwin server

I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below.

http://cetus.ucsd.edu/voicesinthesea.../humpback.html

I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom.

Thank you!

I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name.

I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg.

I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it.

Any help appreciated.

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