|
JavaScript - Playing Sound In Javascript / Html5
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. Similar TutorialsI 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
How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5 Code: <audio controls="controls"> <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" /> <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> THANKS!!!! Is it possible to play a sound file when a visitor to my website moves their mouse/pointer over a single image no matter what browser they are using? Thanks for any help or advice.
I would like to play a .wav sound file when someone hovers their mouse/pointer over an image. Could someone help me out here please. I am running a Linux OS. Thanks.
How can I play a sound when I click an image, without the information bar popping up at top? I've looked all over, and I've tried a few javascript-only methods but none have worked for me.. Is flash the only way to go?
I wrote the following small HTML page, trying to play a sound in Firefox 8 and Internet Explorer 9. The button and the <a></a> link work fine, but calling from the <script></script> tag does nothing. Does anybody know, what can be wrong, and what I can do? I'm sorry, you have to supply the oef.wav file, since I can't upload it. Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.05 [en] (Win95; I) [Netscape]">
<meta name="Author" content="Torben Amtrup">
<title>Soundtest</title>
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Play();
}
</script>
</head>
<body>
<embed src="oef.wav" width="1" height="1" id="sound1" enablejavascript="true" autostart="false">
<form>
<input type="button" value="Play Sound" onclick="EvalSound('sound1')">
</form>
<a onclick="EvalSound('sound1')">Play Sound</a>
<script language="JavaScript">
EvalSound('sound1');
</script>
</body>
I got this javascript Click sound effect to work - http://www.javascriptkit.com/script/...oundlink.shtml My question is how do I make it work on my iphone4 ? I tested the above site on my phone and there is no audio when I tap the screen. The html5 <audio> seems to work with my mobile device on this site - http://css-tricks.com/examples/SoundOnHover/ I am new to javascript thx Hi people ! I went to this page: http://www.javascriptkit.com/script/....shtml#current and I applied that script to my website, everything work perfectly. I only have a question about it: * What should I add to the code to avoid the sound activate even when I'm hovering over the margin of the image? * Would it be possible that the sound activate only when the mouse is hovered over the image and not the margin as well ? * Is the only solution; to insert every image in their own div and then letting the div handle the margin? this is the site www.blackbandanamovement.com the images I'm talking about are in the footer. thanks in advance Hi all, I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard. This is the code I currently have for the checkbox: Code: function playSound() {
if (document.getElementById('sound').checked){
-something needs to be added here to make it work?-
}
}
Anyone have an idea how to make this work? Many thanks 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! 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 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 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, im trying to get a sound effect to play when a slideshow runs. the user selects the sound from a drop down menu on each image. The sound play when selected. But i need some way to pass it into the function that starts the slideshow. I am using pixtastic library to add effects to the images, and jquery (with cycle plugin) to perform the slideshow. The sounds ive put in work when selected, but i need to write a function to play them when the slideshow runs (this is where im stuck!) The library is soundmanager2 Here is the code Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/pixastic.core.js"></script>
<script type="text/javascript" src="js/pixastic.jquery.js"></script>
<script type="text/javascript" src="js/actions/sepia.js"></script>
<script type="text/javascript" src="js/actions/flipv.js"></script>
<script type="text/javascript" src="js/actions/emboss.js"></script>
<script type="text/javascript" src="js/actions/blur.js"></script>
<script type="text/javascript" src="js/actions/solarize.js"></script>
<script type="text/javascript" src="js/actions/edges.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="js/Soundmanager/script/soundmanager.js"></script>
<script>
function change_image(id, effect)
{
Pixastic.process(document.getElementById(id),effect);
}
function startShow()
{
//get the canvas elements on the page
var canvases = document.getElementsByTagName("canvas");
var viewpane = document.getElementById("slideshow");
for(i=0;i<canvases.length;i++)
{
viewpane.appendChild(canvases[i]);
}
$('#slideshow').cycle({
fx: 'all' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
}
</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<title>My Slideshow</title>
</head>
<body>
<div>
<!-- soundManager appends "hidden" Flash to the first DIV on the page. -->
</div>
<div class="wrap">
<h1 id="logo"><a href="javascript:location.reload(true)">My Slideshow!</a> <br /></a></h1>
<ul id="menu">
Welcome to my slideshow, click view show to start<p>alternatively, click the headline to start again</p>
</ul>
<div id="text">
<h2>Edit the images and start the show!</h2><p><h3>You can add more than one effect to each image!</h3>
<div id = "slideshow">
<iNPUT TYPE=BUTTON OnClick="startShow()" VALUE="View The Show">
</div>
</div>
<div id="leftcolumn">
<div id ="firstImage">
<img id="image1" src = "images/image1.jpg"></image>
<form name="first_pic" id="first_pic">
<select name="image1" onchange = "change_image(this.name,this.value);">
<option value="blank">Edit the Image</option>
<option value="sepia">Sepia</option>
<option value="flipv">Flip Vertical</option>
<option value="emboss">Emboss</option>
<option value="solarize">Solarize</option>
<option value="blur">Blur</option>
<option value="edges">Edged</option>
</select>
<select name="image1" onchange = "soundManager.play(this.value);">
<option value="">Choose a sound</option>
<option value="beep">Beep</option>
<option value="gangsta">Gangsta</option>
<option value="glass">Glass</option>
<option value="page">Page turn</option>
</select>
</div>
</p>
</div>
<div id="rightcolumn">
<div id = "secondImage">
<img id="image2" src = "images/image2.jpg"></image>
<form name="first_pic" id="first_pic">
<select name="image2" onchange = "change_image(this.name,this.value);">
<option value="blank">Edit the Image</option>
<option value="sepia">Sepia</option>
<option value="flipv">Flip Vertical</option>
<option value="emboss">Emboss</option>
<option value="solarize">Solarize</option>
<option value="blur">Blur</option>
<option value="edges">Edged</option>
</select>
<select name="image2" onchange = "soundManager.play(this.value);">
<option value="">Choose a sound</option>
<option value="beep">Beep</option>
<option value="gangsta">Gangsta</option>
<option value="glass">Glass</option>
<option value="page">Page turn</option>
</select>
</div>
</div>
<div id="green_bubble">
</div>
</div>
<div id="footer">
<div class="wrap">
<div id="bubble"></div>
<div id="copyright">
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">soundManagerInit();</script>
</body>
</html>
Thanks! Which is the best way to play sound using javascript in a controlled manner ? I need a solution which work across all browsers. This is for my bingo game page which is fully based on ajax. Thanks . I have a self project I am exploring. I would like to play a simple sound file each time a function is run. The function runs every second, so, basically, I am just trying to get an audible click sound file to run every time the function runs. I do not know how to play a sound file thru javascript. Any ideas? Here is the code file thus far... Code: <html>
<head>
<title>Timer</title>
<link href="timer.css" rel="stylesheet" type="text/css" />
<embed src="click.wav" autostart=false hidden=true name="sound1" enablejavascript="true">
<script type="text/javascript">
var seconds = 0;
var clockId;
var running = false;
function runClock() {
seconds++;
document.timer.timerClock.value = seconds;
}
function startClock() {
if (!running) {
clockId = setInterval('runClock()',1000);
running = true;
}
}
function stopClock() {
if (running) {
clearInterval(clockId);
running = false;
}
}
function resetClock() {
document.timer.timerClock.value = 0;
seconds = 0;
}
</script>
</head>
<body>
<form id="timer" name="timer" action="">
<div id="header">
<p>
<span>Timer<br />
</p>
</div>
<div id="intro">
<p>Click to begin timer</p>
<p id="buttons">
<input onclick="startClock()" type="button" value="Begin Seconds Counter" />
<br />
<input name="timerClock" id="timerClock" value="0" />
<br />
<input onclick="stopClock()" type="button" value="Stop Timer" />
<br />
<input onclick="resetClock()" type="button" value="Reset Timer" />
</p>
</div>
</form>
</body>
</html>
Ok, I'm working in dreamweaver cs4 I'm trying to make my links have a sound on mouseover. The tag for this is under the depreciated behaviour section. I tried it to test it. It added the following code to my link: Code: To View Full Product Line<br />
<a href="http://herbal-nutrition.net/yesifeelgood/products" target="_blank" onmouseover="MM_controlSound('play','document.test','sounds/Sound 378.mp3')">Click Here</a>
<embed name="test" src="sounds/Sound 378.mp3" loop="false" autostart="false" hidden="true" width="0" height="0" enablejavascript="true"></embed>
My only problem is that when this loads in a browser on mouseover it loads the window as a quicktime sound then directs to the link preview on the following link (the link where I added the sound is underneath the slideshow: http://www.designfoxmediaworks.com/c...e/carlene.html is there something i should be changing to make this work 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"> ←</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"> →</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 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> 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 |
|||||||