Trying to get an mp3 sound to play with a javascript class but not working. I am not familiar with javascript so I thought it would not be vary different from Java or C. however i do not know why this is not working. this is for an Android app that has built in wikitude. Wikitude uses javascript for adding any functionality to its use of the Android camera class.
trying to use the sound class and nothing i have tried seems to work.
http://www.wikitude.com/external/doc/alr/Sound.html
Here is the full code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script>
var sound = new AR.Sound("assets/bell.mp3", {
onLoaded : function(){sound.play();},
onError : function(){
},
});
AR.sound.onFinishedPlaying = function(){alert("Playing finished");};
AR.sound.load();
AR.sound.play();
</script>
<title></title>
<script src="architect://architect.js"></script>
<script type="text/javascript" src="../ade.js"></script>
<script src="js/marker.js"></script>
<script src="../ade.js"></script>
<link rel="stylesheet" href="css/default.css">
</head>
<body>
<script src="js/multiplepois.js"></script>
</body>
</html>
You can't use something before it's defined, which in your case, is AR. Assuming AR is defined in your architect.js file, you need to move the inline script to somewhere after the library is loaded.
<script type="text/javascript" src="architect.js"></script>
<script type="text/javascript">
var sound = new AR.Sound("assets/bell.mp3", {
onLoaded : function() {
sound.play();
},
onError : function() {}
});
AR.sound.onFinishedPlaying = function(){alert("Playing finished");};
AR.sound.load();
AR.sound.play();
</script>
Related
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
</body>
</html>
Example 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<p>Привет Мир!</p>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=gtElInit&client=wt"></script>
<script type="text/javascript">var gtElInit = function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('ru', 'en', function () {});}</script>
</body>
</html>
When run this page localy from desktop in Chrome - it works (russian words after page page load translate to english). So it works well in snippet here!
But when put page to website and run like normal site from web - it DONT WORK (russian words dont translate). Webpage here: http://www.shram.kiev.ua/bak/1.shtml
Error: Uncaught TypeError: google.translate.TranslateService is not a constructor
I really dont know js but i trully need fix. Help pls. And pls give fix to my topic, because i read all topics about "is not a constructor" but dont understand :(
You need to load the translate library before you try to use it. On an HTML page, <script> tags are loaded in the order they appear, so you need to move the script tag loading Google translate above the script tag where you are trying to use it.
Consider the following script (Also at http://jsbin.com/yegike/1/). If I try to create variable map before including the google maps link, I get a ReferenceError: google is not defined error. Without moving the link before the script, is it possible to eliminate this error? Even if the answer is "no", I would appreciate an explanation on what is happening.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<!-- <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> -->
<script>
(function($){
var map = new google.maps.LatLng(47.64864, -122.348927);
}(jQuery));
</script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</body>
</html>
You're trying to call a method named maps within the google namespace which is defined in your commented out script. The solution for this is to use the jQuery.ready method to execute your code when the page has been loaded (including your script include at the bottom of the page). Wrap your function within this and you should be good to go:
$( document ).ready(function() {
var map = new google.maps.LatLng(47.64864, -122.348927);
});
For more information about ready you can check out the always useful jQuery API:
http://api.jquery.com/ready/
Perhaps try this which waits until the page is loaded and if it takes google a while to load, then it will try again:
var map;
function makeMap() {
if (google && google.maps) { // google loaded?
map = new google.maps.LatLng(47.64864, -122.348927);
return;
}
setTimeout(makeMap,200); // try again
}
$(function(){ // on page load instead of Immediately-Invoked Function Expression (IIFE)
makeMap();
});
I've found various ideas on how to detect when a web video ends, but can't get the syntax right for the way I'm using javascript to play the video. Note that I'm using version 4 of the jwplayer.
Here is the HTML that uses swfobject.js and player.swf. It works fine, but I want to add code that detects when the video has finished at will then redirect to a web location using - window.location.href = http://www.webpage.com
Any help will be very appreciated! Here's the full page of HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='swfobject.js'></script>
</head>
<body lang=EN-US bgcolor='#000000'>
<center>
<p id='preview'></p>
<script type='text/javascript'>
var so = new SWFObject('player.swf','player1','640','381','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','&file=mymovie.m4v&bufferlength=3&autostart=true&controlbar=bottom');
so.write('preview');
</script>
</center>
</body>
</html>
You need to use our JS API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
And, use our JW Embedder (Not SwfObject) - http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player
Then, the set up will look something like this:
<h2>Redirecting on complete</h2>
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"bunny.mp4",
flashplayer:"player.swf",
height:400,
width:600,
events:{
onComplete: function() {
window.location = "http://www.google.com";
}
}
});
</script>
Hope that helps!
I am building a website with my school work (dreamfoxgames.com).
If you click on a button called "play" a popup/Modal will come with the game in flash or unity plugin. My problem is that when a visitor loads the page they will automatic load the flash file. This means that the music will start and the page will be slow with loading (all those games).
Is there a way to only load the flash player after somebody hit the play button?
Thanks a lot!
It can also be done using an embed element (no need for external api):
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var flashEmbed = null;
function startFlash() {
if(flashEmbed != null) {
document.getElementById("flashContainer").removeChild(flashEmbed);
}
flashEmbed = document.createElement("embed");
document.getElementById("flashContainer").appendChild(flashEmbed);
flashEmbed.src="Flashfile.swf";
flashEmbed.type="application/x-shockwave-flash";
}
</script>
</head>
<body>
<button onclick="startFlash()">start flash</button>
<div id="flashContainer"></div>
</body>
</html>
You can use swfobject to load swf content in div.
Suppose if you have a div in your html as below
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>
</head>
<body>
<div id="myContent">
swf will be embedded here
</div>
<button onclick="playSwf()">Click to play swf</button>
</body>
</html>
To play the swf..
<script type="text/javascript">
function playSwf()
{
//Syntax
//swfobject.embedSWF(swfUrl, id, width, height, version,
// expressInstallSwfurl, flashvars, params,
// attributes, callbackFn)
//optional parameters omitted
swfobject.embedSWF("test.swf", "myContent", "400", "400","10");
}
</script>
As a newbie I am trying to run a PHP file and then an HTML file automatically using an
onload="Trigger();" in the body of the HTML.
Enclosed is my code but it will not work even though the onload is accessing the Javascript code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-ca">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<script src="jquery.js" language="javascript1.2" type="text/javascript"></script>
<script src="swapstyle.js" language="javascript1.2" type="text/javascript"></script>
<script src="cookie.js" language="javascript1.2" type="text/javascript"></script>
<script language="Javascript">
function Trigger() {
document.Trigger.action = "http://www.Website.com/ISP.php";
document.Trigger.target = "_top";
document.Trigger.submit();
document.Trigger.action = "http://www.Website.com/Home.html";
document.Trigger.target = "_top";
document.Trigger.submit();
return true;
}
</script>
</head>
<body onload="Trigger();"></body>
</html>
Any suggestions?
It looks like you need to submit two forms onLoad. In your HTML create two forms, but the issue is that you are targeting the same frame, so while one is submitting the other is trying to as well (you could time it so one submits, the other waits until it is submitted OR target another frame like so:
<body onload="trigger();">
<form name="php-form" action="http://www.Website.com/ISP.php" target="_top">
<form name="htm-form" action="http://www.Website.com/Home.html" target="_another">
</body>
Then:
function trigger(){
document.php-form.submit();
document.htm-form.submit();
}
OR a timed method so one submits then the other shortly after using the same target:
<body onload="trigger();">
<form name="php-form" action="http://www.Website.com/ISP.php" target="_top">
<form name="htm-form" action="http://www.Website.com/Home.html" target="_top">
</body>
function trigger(){
document.php-form.submit();
setTimeout(function(){ document.htm-form.submit(); }, 2000); // 2 seconds after
}
Hopefully this helps.