|
JavaScript - Play Multiple Embedded Audio Files Simultaneously With Single Button
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! Similar TutorialsHi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance! P.S. I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code. Code: <html>
<head>
<title> Sample Page </title>
<script>
// Get element holding the video (embed or object)
var player = document.getElementById("MOVIE");
//Create a simple function and check if player exists
function play() {
if(player) {
player.playVideo();
}
}
</script>
</head>
<body>
<object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</br></br>
<a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
<a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
</body>
</html>
I'm having a problem with one of my Labs and My TA is not answering emails. I need to make a button, that when you click it, turns the bgColor blue, when you click it twice, it turns bgColor yellow, and a third time turns it orange. The tricky part is, I need to use an internal CSS style sheet for the color, and a function for the javascript. Here is what I have so far, but I'm completely stuck. Code: <html>
<head>
<style type="text/css" media="all">
highlight {background-color:yellow;}
</style>
<script type="text/javascript">
function blue()
{
document.bgcolor = blue;
}
</script>
</head>
<body>
<p>Good morning. In less than an hour, aircraft from here will join others from around the world..... </p>
<input type="button" value="Push me to change color!" onclick="document.bgColor= 'blue'">
</body>
</html>
(I cut out the doctype for readability) Obviously I'm not utilizing the function.. I tried replacing 'blue' with blue() (which is the name of the function) but that didn't work.. So how I utilize both the function, and the CSS sheet, AND get the button to do consecutive actions onClick..? -Thanks, this is my first post, I hope everything is understandable. 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 I have created a webpage using wordpress for a customer, he wants an embedded video to be played every time a visitor comes to the websites. i did it in the beginning with you tube and it was easy but he is hosting his videos in a lame company and no matter what i try, i am not able to make the video play on load, guys can you please help me with this. here is an example of embed code from that website <object id="player" width="550" height="380" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ><param name="movie" value="http://www.videozer.com/embed/RLyPu" ></param><param name="allowFullScreen" value="true" ></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.videozer.com/embed/RLyPu" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="550" height="380"></embed></object> I wrote this to trigger a video when an image is clicked, but it doesnt work. Any help? Code: <head>
<style>
#movie {}
#img {}
</style>
</head>
<body>
<embed type="application/x-vlc-plugin" name="VLC" rel="nofollow" target="mymovie.webm" id="movie" > </embed>
<img src=myimage.jpg" id="img" />
<script>
var v = document.getElementById("movie");
var i = document.getElementById("img");
i.onclick = function() {
v.play();
};
</script>
</body>
I'm using VS2008Pro with Master pages. On a child page, I have a modalPopupExtender that calls a panel with an embedded Google video. Everything works great - the popup appears with the video, background greyed. But, when I close the panel, the audio keeps playing in IE 7 & 8. Netscape is fine. I went and tried what Google recommended, but it still continues. Any ideas? Code: '//In child page header
<script src="../swfObject/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer", name: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/e/GtHDrLngXlc?enablejsapi=1&playerapiid=myytplayer", "myytplayer", "425", "344", "8", null, null, params, atts);
function stopVideo() {
var playerObj = document.getElementById("myytplayer");
if (playerObj) {
playerObj.stopVideo();
playerObj.clearVideo();
}
}
</script>
'//in child page html
<asp:ImageButton ID="imgBtnAmanda" runat="server" ImageAlign="Middle" ImageUrl="~/media/quality/devMedAmanda.jpg" />
<asp:Panel ID="pnlAmanda" runat="server" CssClass="modalPopup">
<asp:ImageButton ID="imgBtnCloseAmanda" runat="server" ImageUrl="~/images/icon-x.gif" ImageAlign="Right" /><br /><p align="center">
<div id="myytplayer" name="myytplayer" style="width:425px; height:344px;">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<br /><br />Amanda Levesque's performance of "To Dream the Impossible Dream"</p></asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="modalAmanda" runat="server" TargetControlID="imgBtnAmanda" PopupControlID="pnlAmanda" BackgroundCssClass="modalBackground"
CancelControlID="imgBtnCloseAmanda" OkControlID="imgBtnCloseAmanda" OnOkScript="stopVideo;" onCancelScript="stopVideo;" />
</p>
I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! 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!
I built some pages that uses a Flash widget to play mp3 files on my server and show album covers at the same time. However, for people without Flash (like iPhone/Safari), I accommodate them by using a JavaScript that offers a list of simple links to the mp3 files. What I would really like, in the case of a page where there are several songs by the same artist, is a script that when activated, will play all the files in order. Possible? Where would I look for such a script?
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. 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. I have been searching for an answer to this pretty much all day... I'm fed up. Can someone help? I want to be able to open wmv videos in an embedded windows movie player using javascript. Something identical to what you will find he http://www.hunlock.com/blogs/Everyth...ding#quickIDX2...go down to the heading :'How to make a video select list'. I am trying to emulate this but for wmv files and windows media player rather than for flsh files. I have tested this on one link and it does not open. i just get a black media screen and nothing. Here's my code: Here's the script within the head tag: Code: <script type="text/javascript">function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string')
{targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false;}</script>
Here`s the link: Code: <a href="#" onclick='return playVideo("selectdemo1","videoPlayback")'>
video 1</a>
and here's the embedding and the play back code (The play back area is within the same page as the link): Code: div id="selectdemo1">
<OBJECT id='mediaPlayer' width="450" height="445"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="\\HOC\AdminPrivate\FS08U\TurgeL\Documents\Site Web\videos\Add_Documents.wmv">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="false">
<param name='showControls' value="true">
<param name='loop' value="false">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="450" height="445"
src="http://servername/\\\\HOC\\AdminPrivate\\FS08U\\TurgeL\\Documents\\Site Web\\videos\\Add_Documents.wmv&autoplay=1" autostart="false" designtimesp='5311' loop="false">
</EMBED>
</OBJECT>
</div>
</div>
Please help meeeeeeeeeeeeeeeeeeee! Basically, I want to make it so there is a button, and when you click it, it plays a random song from a list of songs that would be in the code. I am not completely sure if this is possible or not. I know how to make the button, that is simple. Sorry if this is actually easy, I am just learning how to script. I have a simple play js button on my HTML page as well as embedded music. So when you are a computer the music autoplays then stops and you have the option to listen to it again with the js button. This "theoretically" will work fine for the iPhone and iPad because even though the embedded music isn't auto playing the user can still click the listen button and hear the music. It works on the iPhone perfectly but not the iPad. I'm at a loss. Here is my jscript: function FFFFSound(soundobj) { var thissound= eval("document."+soundobj); thissound.Play(); } My embedded music: <embed src="music/FFFFKids.mp3" autostart="true" loop="false" hidden="true"> <embed src="music/FFFFKids.mp3" autostart="false" loop="false" hidden="true" name="sound1"> And my button: <input type="button" value="Listen" onClick="FFFFSound('sound1')" class="listen_button"> You can view the page at feefifofun.com I am at a total loss..... thanks! I am looking for a way to add multiple items with a single URL to my shopping cart. any ideas? cheers, Hi, When designing a web page, you may come across a situation where you want to combine content from multiple websites in a single window. Could the "iframe" tag makes this possible? If so, as it will separate your page design into several sections and display a different website in each one? Your answers are much appreciated. Thank you for watching me. Stickers Hi, First time here. I have had no luck searching on Google or here regarding this. Any help is appreciated. I am trying to tie the value of an image src to two onChange events. the events are drop down boxes in a form. I do have a couple of single event driven peices working so I think my logic is sound. I originally tried to do this with multiple if statements that tested both conditions/events. I have since given each event it's own function. I have no idea what i am doing wrong. the onChange events have no effect on the image display at all. The default image just stays in place. My JS knowledge is limited but it looks correct as far as I can tell. What am I missing. Here are the functions: Thank You! Code: function dropdownimageMidC()
{
if(!document.images)
return
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Code: function dropdownimageMidS()
{
if(!document.images)
return
if(document.standard5.Mid_Separate.options=="Mid-do not separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_connector_H.png";
}
}
if(document.standard5.Mid_Separate.options=="Mid-separate"){
if(document.standard5.Mid_Connector.options=="Mid-no connector"){
document.images.schematicMid.src="image/std_mid_slit_H.png";
}
if(document.standard5.Mid_Connector.options=="Mid-connector"){
document.images.schematicMid.src="image/std_mid_slit_connector_H.png";
}
}
}
Hi to everybody, I created a site and added a sound on click events a hover. But not all my website visitors prefer it, so I would like to add a button to mute these click sounds. Is this possible? Please help me because I don't have a clue on how to proceed. Thanks very much in advance Dimitri Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help. Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards. I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top. So my first one is this.. 1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this: Code: <html>
<head>
<script language="javascript">
function generateLogs (form)
{
TW_Logger.tickDoc.value = TW_Logger.name.value;
}
</script>
</head>
<body>
<form name="TW_Logger">
<label for="name_id">Name: </label>
<input type="text" name="name" id="name_id"/><br /><br />
<label for="logs_id">Ticket Documentation: </label><br />
<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">
</textarea><br /><br />
<label></label>
<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
</form>
</body>
</html>
I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks! |
|||||||