JavaScript - Playing Certain Audio Files Using Javascript (or Possibly Php)

This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.)

So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please.

Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing?

Thanks in advance!

Hi, I need some help with playing sounds with javascript.

What I need:
When the user clicks the button it will run the function and play a sound either from the source or embedded into the website(which ever way works).

Thanks alot!

I am trying to write a game in javascript that will play a tune when a certain score is reached. I can get music to play if i put the code behind a button but I would prefer to use an if statement in the header section. Any suggestions please???? Many thanks

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.

Hi there,

Not sure what sub category this falls under sorry, but I have an issue changing a table based menu to a css based menu.

This has been done however the javascript code no only partly works, I would like for it to completely work and am not sure whether I should use aspanel or <div> tags to get it to work as I have tried both and neather seem to work so there is something i am obviously missing!

here is the javascript:
Code:

$(function() {
    $('#mainCategories a').live('click', function() {
        $.ajax({
            type: "GET",
            contentType: "text/html; charset=utf-8",
            dataType: "html",
            url: "/ajax/menu.aspx?CategoryId=" + this.name,
            cache: false,
            success: function(newMenu) {
                $("#left-menu-control").replaceWith(newMenu);
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        });
        return false;
    });

    $('#left-menu-collapse-category').live('click', function() {
    $.ajax({
        type: "GET",
        contentType: "text/html; charset=utf-8",
        dataType: "html",
        url: "/ajax/menu.aspx",
        cache: false,
        success: function(newMenu) {
            $("#left-menu-control").replaceWith(newMenu);
        }
    });
    return false;
    });
});

and here is the page code:
Code:

<div id="menu-left">

<asp:Panel ID="pnlLeftMenuControl" runat="server">
	
	<asp:Panel ID="pnlCategories" runat="server">
			
			<asp:Panel ID="pnlCurrentlyViewing1" runat="server" Visible="false">
				<div id="menu-left-main-categories">
				<div id="menu-left-currently-viewing-title">Currently Viewing...</div>
				<div id="menu-left-currently-viewing-close"><a href="javascript:void(0);" title="Collapse category" id="left-menu-collapse-category"><img src="~/images/button-menu-left-currently-viewing-close.jpg" runat="server" border="0" /></a></div>
				</div>
			</asp:Panel>
		
			<asp:Panel ID="pnlCurrentlyViewing2" runat="server" Visible="false">
				<div id="menu-left-currently-viewing">
				<div id="menu-left-currently-viewing-text"><asp:Hyperlink ID="hlCategory" runat="server" CssClass="left-menu-viewing"></asp:Hyperlink></div>
				</div>
			</asp:Panel>
		
			<asp:Panel ID="pnlSubCategories1" runat="server" Visible="false">
				<asp:Repeater ID="rptSubCategories" runat="Server">
					<ItemTemplate>
						<div id="menu-left-currently-viewing">
						<div id="menu-left-currently-viewing-text">- <asp:HyperLink ID="hlSubCategory" runat="server" CssClass="left-menu-viewing"></asp:HyperLink></div>
						</div>
					</ItemTemplate>
				</asp:Repeater>
			</asp:Panel>
			
			<asp:Panel ID="pnlMainCategories" runat="server">
				<asp:Repeater ID="rptMainCategories" runat="server">
					<ItemTemplate>
					<div id="menu-left-main-categories"><div id="menu-left-main-categories-text"><asp:HyperLink ID="hlCategory" runat="server" CssClass="left-menu"></asp:HyperLink></div></div>
					</ItemTemplate>                
				  </asp:Repeater>
			</asp:Panel>
			
		</asp:Panel>
      
	<asp:Panel ID="pnlBrands" runat="server" Visible="false">
		
		<asp:Panel ID="pnlBCurrentlyViewing1" runat="server" Visible="false">
			Currently viewing...
		</asp:Panel>
		
		<asp:Panel ID="pnlBCurrentlyViewing2" runat="server" Visible="false">
			<asp:Label ID="lblBCurrentlyViewing" runat="server" CssClass="left-menu-viewing"></asp:Label>
		</asp:Panel>
	
		<asp:Repeater ID="rptBrands" runat="server">
			<ItemTemplate>
				<asp:HyperLink ID="hlBrand" runat="server" CssClass="left-menu"></asp:HyperLink>
			</ItemTemplate>                
		</asp:Repeater>
		
	</asp:Panel>
	  
</asp:Panel>
</div>

any help would be greatly appreciated

hi I am trying to play a video from youtube. What I have done so far is getting videos from my database and displaying all those videos thumbnails. So now what i want is to when i click any thumbnail it should play that video in my website. How can I do this?

Here is my code
Code:

function showResult(result) {
        $('#videosLoader').css('display','none');
            var videoId = result.split(" ");
            for(i = 0; i < videoId.length - 1; i++) {
            var vidId = $.trim(videoId[i]);
            vidLink = getScreen(vidId,"small");
            $('#videosList').append("<div class='playVid'>" + 
                                        "<img width=80 height=80 src=" + vidLink + " alt='' /> " + 
                                        "<input type='hidden' name='vidId' value='" + vidId + "' />" + 
                                    "</div>").addClass("playVid");
    }
    
    $('.playVid').click(function() {
        var val = $("input[name='vidId']").val();
        alert("val");
        $("#haveYourDefinition").append("<embed src='http://www.youtube.com/v/" + val + "&rel=1' pluginspage='http://adobe.com/go/getflashplayer' type='application/x-shockwave-flash' quality='high' width='450' height='376' bgcolor='#ffffff' loop='false'></embed>");
    });

When I click any thumbnail it does nothing. Why and please tell me how to do this? Help

Hi there,

I am just writing to see if I can receive some help regarding an issue I'm having?

I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such.

I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/

Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page)

Code:

// ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;

// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
	if (isPlaying !== false) {
		var nextNote = 60000 / curTempo / 4;
		// Turn off all lights on the tracker's row
		$("#tracker li.track").removeClass("active");
		// Light up the tracker on the current track
		$("#tracker li.track.col_" + curNote).addClass("active");
		// Find each active note, play it
		var tmpAudio;
		$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
			tmpAudio = document.getElementById($(this).data('sound_id'));
			if (!tmpAudio.paused) {
				// Pause and reset it
				tmpAudio.pause();
				tmpAudio.currentTime = 0.0;
			}
			tmpAudio.play();
		});
		// Move the track forward
		curNote = (curNote + 1) % 16;
	} // if (isPlaying)
} // playTune

// Make a new hash
function buildHash() {
	// Start it
	var newhash = '';
	// For each track, check and add in a 0/1 as appropriate
	$(".playBar[id^=control] li.track").each(function(i){
		newhash += $(this).is('.active') ? '1' : '0';
	});
	// Separate it
	newhash += '|';
	// Now, toss in the note
	newhash += $('#temposlider').slider('value');
	// Check and see if we really need to update
	if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash

// Read in our hash
function parseHash() {
	if (location.hash.length > 0) {
		// Split it up, work it out, removing the actual hashmark
		var pieces = location.hash.substring(1).split('|');
		// Set the lights
		var lights = pieces[0];
		$(".playBar[id^=control] li.track").each(function(i){
			// Make sure we haven't exceeded
			if (i >= lights.length) return false;
			// Check our location, turn on class if need be
			if (lights.charAt(i) == '1') {
				$(this).addClass('active');
			}
		});
		// Set the tempo
		if (typeof pieces[1] !== 'undefined') {
			$('#temposlider').slider('value', parseInt(pieces[1]));
			$('#tempovalue').innerHTML = pieces[1];
			curTempo = parseInt(pieces[1]);
		}
	}
} // parseHash

// Clear it!
function clearAll() {
	$(".playBar[id^=control] li.active").removeClass('active');
}

// Run on DOM ready
$(document).ready(function(){
	// Process each of the audio items, creating a playlist sort of setup
	$("audio").each(function(i){
		// Make a self reference for ease of use in click events
		var self = this;

		// Make a sub-list for our control
		var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
		$ul.append('<li class="header">' + this.title + '</li>');
		// Add 16 list items!
		for (j = 0; j < 16; j++) {
			var $li =
				$('<li class="track col_'+j+'">'+self.id+'</li>')
				.click(function(){
					$(this).toggleClass('active');
					buildHash();
				})
				.data('sound_id', self.id);
			$ul.append($li);
		} // for (i = 0; i < 16; i++)
		// Append it up
		$('<li>').append($ul).appendTo('#lights');
	});

	// Bind up a click for our button
	$("#soundstart").click(function(){
		if (isPlaying === false) {
			// Start the playing!
			curNote = 0;
			isPlaying = setInterval(playTune, 60000 / curTempo / 4);
			// Change our display
			this.innerHTML = "Stop";
		} else {
			clearInterval(isPlaying);
			isPlaying = false;
			$("#tracker li.track").removeClass("active");
			$("audio").each(function(){
				this.pause();
				this.currentTime = 0.0;
			});
			this.innerHTML = "Play";
		}
	});

	$('#clearall').click(clearAll);
	$('#reload').click(parseHash);

	// ===== Misc =====
	// Build or read the hash
	if (location.hash == '') {
		// I was building this at load - but now, no, just to be safe
		//buildHash();
	} else {
		parseHash();
	}

	// Show our value, now that we've built off of the hash
	$('#tempovalue').html(curTempo);
	// Make our tempo slider
	$('#temposlider').slider({
		'value': curTempo,
		'min': 30,
		'max': 170,
		'step': 2,
		'slide': function(e, ui) {
			curTempo = ui.value;
			$('#tempovalue').html(curTempo);
			if (isPlaying !== false) {
				clearInterval(isPlaying);
				isPlaying = setInterval(playTune, 60000 / curTempo / 4);
			}
		},
		'stop': function(e, ui) {
			buildHash();
		}
	});
});

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!

Hello,
I'm a student web developer. I'm debugging some JavaScript code I just created that simply extracts a table, reorders it and replaces it when the user clicks on a button ('Order results' - top right of the table). (It's a small script).

It's for a PHP based polling application, completely of my own creation, which is under construction (only the JavaScript doesn't work).
You can see all the code if you use Firebug. Go to the following link and vote for something; that will take you to a page the JavaScript is located.
http://www.samuellockyer-development...s/examples.php
(I'm linking because I think the context of the page may help.)

(Notice the type error alert.) (Update: Not anymore.)
(There are NO syntax errors.)

You will find the area of the bug quickly by looking at the comments.
(Marked by !!BUG!!) (Update: Not anymore, look at the posts below to find them now.)

I am very new to JavaScript, but I wrote all the code, so I will be able to answer questions easily.
This is a last resort by the way, I need this to work within about two days and I would be SO grateful for any help!!

You can vote as many times as you like - I can just zero everything before I demo the app.

My site loads too many javascript files and it takes much time to load page. I would like to reduce the number of http requests and combine all javascript files into one file. What is the best way for it? Will it work if I just copy whole code from all files and paste into one or anything else is needed?

Thanks

So, I have a dynamic PHP file on my server. I want to make it so browsers can take the code I provide and paste it in an .html, .php, or .asp file, and it'll display across the board.

The file would need to be included, unless someone thinks there's a better way of doing this?

The only example I could think of would be Google Adsense's code? But I'm not sure.

I am doing a program to teach pre-schoolers on how to use the keyboard. If there any possible if I press the arrow up key, It will then show a excellent swf, that I have make. if wrong if will come out try again swf using javascript.

please help me. im stuck.

hi all, i'm a relatively new user to javascript.

i'm supposed to use javascript to search through a folder that contains many excel files.
the search term is obtained from a front end html form, javascript gets that value, search every single excel file in the folder and see which file has a cell that matches the search terms.

I currently know (sort of) how to search through 1 file. but how do I search through many files? and from what i see from the searching of 1 file, it takes a few seconds to open and close the excel file (located on a network drive). which means it will take a fair bit of time to cycle through 97 excel files. Is there like any searching algorithm to speed up the process?

Howdy all.

I have Win 7, IE9.

I have a HTML file on my hard drive, with Javascript within. When I load the page, it keeps popping up Do u want to allow this content, I have to click to allow. I want to stop this, and after doing some searching I found the setting in Internet Options, Advanced - "Allow active content to run in files on my computer".

Perfect.

Doesnt work. When i check this box, the page loads without the warning, but then the Javascript just doesnt work.

Getting quite annoying, because this file is my home page.

Any help would be great!

I have an external Javascript file that only works when I put:

Code:

<script type="text/javascript" src="external.js"></script>

at the end of the HTML page. Does anyone know why it won't work in the head of the page?

Thanks