Using soundManager2, I made a simple anchor with onclick="mySound.play()", but there is a big gap (almost half a second) before the sound is actually heard! This is, even though I pre-loaded the sound. How can I get a better response-time?
Here is the source 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" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Shawn Inder" />
<title>jeuReno</title>
<style type="text/css">
<!--
-->
</style>
<!-- include SM2 library -->
<script type="text/javascript" src="soundManager/script/soundmanager2.js"></script>
<!-- configure it for your use -->
<script type="text/javascript">
soundManager.url = 'soundManager/swf/'; // directory where SM2 .SWFs live
// Note that SoundManager will determine and append the appropriate .SWF file to the URL,
// eg. /path/to/sm2-flash-movies/soundmanager2.swf automatically.
// Beta-ish HTML5 audio support (force-enabled for iPad), flash-free sound for Safari + Chrome. Enable if you want to try it!
// soundManager.useHTML5Audio = true;
// do this to skip flash block handling for now. See the flashblock demo when you want to start getting fancy.
soundManager.useFlashBlock = false;
// disable debug mode after development/testing..
// soundManager.debugMode = false;
// Option 1: Simple onload() + createSound() method
/*soundManager.onload = function() {
// SM2 has loaded - now you can create and play sounds!
soundManager.createSound('helloWorld','sounds/crash.mp3');
soundManager.play('helloWorld');
};*/
// Option 2 (better): More flexible onload() + createSound() method
/*soundManager.onload = function() {
var mySound = soundManager.createSound({
id: 'aSound',
url: 'sounds/kick.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
}*/
// Option 3 (best): onready() + createSound() / ontimeout() methods for success/failure:
/*soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
var mySound = soundManager.createSound({
id: 'aSound',
url: 'sounds/snare.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.play();
});*/
soundManager.useHighPerformance = true;
soundManager.ontimeout(function() {
// (Optional) Hrmm, SM2 could not start. Show an error, etc.?
alert("wtf");
});
</script>
<script type="text/javascript">
/*var snare = soundManager.createSound({
id: 'snare',
url: 'sounds/snare.mp3'
});
var kick = soundManager.createSound({
id: 'kick',
url: 'sounds/kick.mp3'
});
var crash = soundManager.createSound({
id: 'crash',
url: 'sounds/crash.mp3'
});
var highHat = soundManager.createSound({
id: 'highHat',
url: 'sounds/highHat.mp3'
});*/
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'aSound',
url: 'sounds/snare.mp3'
// onload: [ event handler function object ],
// other options here..
});
mySound.load();
// mySound.play();
});
</script>
</head>
<body>
click
</body>
</html>
I don't see where the song gets preloaded. You want to set autoLoad to true in the default or createSound section (the defaults should be inherited by createSound).
In the default section it would be soundManager.autoLoad = true;
Or in the createSound method autoLoad:true, id: 'aSound', url: 'sounds/kick.mp3'
Related
I try to create event handling...so i followed this video tutorial ..everything working perfect. but in last minute video when i try to show user name in list view its not updating in real time as list view but i checked console.log('users') each object i can get it from my console.... but in view no updates or no errors ......... what is error ?
This is video tutorial - LINK
<body>
<ul id="users">
<li v-repeat="user: users">#{{ user.name }}</li>
</ul>
<script src="https://js.pusher.com/3.0/pusher.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<script>
// (function () {
// var pusher = new Pusher('82355e6cc93e7a15d7d5', {
// encrypted: true
// });
//
// var channel = pusher.subscribe('test');
// channel.bind('App\\Events\\UserHasRegistered', function(data) {
// console.log(data);
// });
// })();
new Vue({
el: '#users',
data:{
users:[]
},
ready: function(){
var pusher = new Pusher('82355e6cc93e7a15d7d5', {
encrypted: true
});
pusher.subscribe('test')
.bind('App\\Events\\UserHasRegistered',this.addUser);
},
methods: {
addUser: function(user){
this.users.push(user);
}
}
})
</script>
</body>
The v-repeat directive is deprecated in version 1.0 and replaced with the v-for.
1.0 replaces the old v-repeat directive with v-for. In addition to providing the same functionality and more intuitive scoping, v-for provides up to 100% initial render performance boost when rendering large lists and tables!
http://vuejs.org/2015/10/26/1.0.0-release/#Faster-Initial-Rendering
I have a script inserted into Magento and it does not seem to be behaving properly. Whenever it runs it actually feeds the contents of the html document back into the text box rather than the autosuggestion. Can anyone tell me what the issue seems to be? I think it might be the two functions conflicting, is there a good way to clean this up?
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" >
//<![CDATA[
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("#antique_toys_materials").keyup
(function()
{
var tag= $j(this).val();
if(tag!='')
{
$j.ajax(
{
type: "GET",
url: "autocomplete.php",
data: "q=" + tag,
cache: true,
success: function(result)
{
$j("#antique_toys_materials").val(result);
}
}
);
}
return false;
}
);
}
);
//]]>
</script>
<script type="text/javascript" >
//<![CDATA[
$j = jQuery.noConflict();
$j(window).load(function(){
function calculate()
{
var values = [
$j("#cost").val(),
$j("#shipping_paid").val(),
$j("#tax_paid").val()
];
var percent_value = $j("#our_markup").val();
//---------------------------//
if (percent_value == 285)
{
var percent_value = 0;
}
var sub_total = eval( values.join('+') );
var total = eval("sub_total+(sub_total * percent_value)");
var shortened_total = total.toFixed(2);
$j("#price").val(shortened_total);
}
$j( document ).ready(function() {
$j(document).on('input', 'input', calculate);
$j(document).on('change', 'select,input', calculate);
});
});
//]]>
</script>
and it hooks up with this
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
$mysqli=mysqli_connect('localhost','XXXXXXX','XXXXXXX','XXXXXXX') or die("Database Error");
$sql = "SELECT DISTINCT auto_complete_suggestions FROM auto_complete WHERE auto_complete_suggestions LIKE '%$my_data%'
ORDER BY CASE WHEN auto_complete_suggestions = '$mydata' THEN 0
WHEN auto_complete_suggestions LIKE '$mydata%' THEN 1
WHEN auto_complete_suggestions LIKE '%$mydata%' THEN 2
WHEN auto_complete_suggestions LIKE '%$mydata' THEN 3
ELSE 4
END, auto_complete_suggestions LIMIT 0,1";
$result = mysqli_query($mysqli,$sql) or die(mysqli_error());
if($result)
{
while($row=mysqli_fetch_array($result))
{
echo $row['auto_complete_suggestions']."\n";
}
}
?>
It works fine in isolation without the noConflict but then when I put it in Magento it seems to need some help and I'm sure that since it's feeding the html file back into it that something's wrong.
Thoughts? Thanks!
This is just a quick guess, but try using the word "jQuery" instead of "$". I had to change a few plugin scripts that interfered with prototype since it too uses the "$". Once I replaced all instanced of $ with the word jQuery, things started working as I expected.
Does reactjs works fine with IE8? I am using React v0.11.1.
Following code is NOT working in IE8. Works fine on all the other browsers
SCRIPT438: Object doesn't support property or method 'isArray'
File: react.js, Line: 17372, Column: 37
SCRIPT5009: 'React' is undefined
File: myreact.js, Line: 3, Column: 1
SCRIPT438: Object doesn't support property or method 'map'
File: JSXTransformer.js, Line: 12637, Column: 3
/** #jsx React.DOM */
var MyComponent = React.createClass({displayName: 'MyComponent',
getDefaultProps:function(){
return{
text:"",
numbers:0
}
},
getInitialState:function(){
return {txt:"initial", id:0}
},
updateText: function(event){
this.setState({text:event.target.value})
},
propTypes:{
text:React.PropTypes.string,
numbers: React.PropTypes.number.isRequired
},
render:function(){
return (
React.DOM.div(null,
Widget({text: this.state.text, update: this.updateText}),
Widget({text: this.state.text, update: this.updateText})
)
)
}
});
var Widget = React.createClass({displayName: 'Widget', render:function(){
return(
React.DOM.div(null,
React.DOM.input({type: "text", onChange: this.props.update}),
React.DOM.div(null, this.props.text)
)
)
}
});
React.renderComponent(
MyComponent({text: "HI there", numbers: 34}),
document.getElementById("content")
);
You need to use the following shims/pollyfills as noted in the react docs. es5-shim will resolve the specific isArray bug you are seeing.
I've managed to launch my React app in IE8 using the following code:App.js:
require('core-js'); //Important!
var React = require('react');
var ReactDOM = require('react-dom');
var Application = React.createClass({ ... });
ReactDOM.render(React.createElement(Application,null), document.getElementById("app-container"));
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
<script type="text/javascript" src="bundle.js" defer></script>
</head>
<body>
<div id="app-container"></div>
</body>
</html>
Comments: bundle.js will be loaded after es5-shim/es5-sham because of defer html attribute
Our application uses an $http interceptor to add tokens to $http requests as a form of security, the token that the interceptor adds are updated every 5 or so minutes. We now want to use ng-grid.
However, the $http interceptor makes is so that ng-grid will not load the template it uses for the header row, which causes the header row to not render.
Here is the issue in action: http://plnkr.co/edit/krvBF2e4bHauQmHoa05T?p=preview
If you check the console it shows the following error:
GET http://run.plnkr.co/l0BZkZ2qCLnzBRKa/ng1389719736618headerRowTemplate.html?securityToken=123456 404 (Not Found)
The reason why this happens is because ng-grid stores the template for the header row in the $templateCache, and then uses an ng-include to later retrieve it.
ng-include uses a $http.get request, with $templateCache as the cache, to get the template.
The $http.get request is intercepted by the interceptor which adds the security token to the url before it has a chance to query $templateCache for the template using the url.
$templateCache is expecting ng1389719736618headerRowTemplate.html but instead gets ng1389719736618headerRowTemplate.html?securityToken=123456
The result is that the $templateCache can't find the template, which then results in $http.get hitting the server and getting the 404 error.
The other issue is that if we ever wanted to use $templateCache to store templates and later retrieve it with ng-include or $http.get, $templateCache would not being able to find the template because the url would get modified.
How can I get ng-grid to display the header row with the $http interceptor adding security tokens to the end of the urls?
here is the code
Html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
javascript:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});
app.config(function($provide, $httpProvider) {
$provide.factory('tokenAuthInterceptor', function($q){
return {
// optional method
'request': function(config) {
// do something on success
config.url = config.url + "?securityToken=123456";
return config || $q.when(config);
}
};
});
$httpProvider.interceptors.push('tokenAuthInterceptor');
});
Update
The solution that was finally decided upon was to use an angular decorator and decorate $templateCache, the plunker was updated to reflect this.
$provide.decorator('$templateCache', function($delegate) {
var get = $delegate.get;
function formatKey(key)
{
// code for formatting keys
}
$delegate.get = function(key) {
var entry = get(key);
if (entry)
{
return entry;
}
else
{
return get(formatKey(key));
}
};
return $delegate;
});
We ran into this same issue and implemented a quick check in our interceptor to check if the item was already in the templateCache.
if ($templateCache.get(config.url)){
return config;
}
I got the idea from the cachebuster project.
I am trying to use COMET with dojo and it fails on the first line of the example with the message
dojox is not defined
I must miss something obvious
this is the page (the error is on the first line of the BODY):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="dojo/dojo.js"
data-dojo-config="async:true, parseOnLoad:true">
</script>
<script>
require( ["dojox/socket"] );
</script>
</head>
<body>
<script type="text/javascript">
var socket = dojox.socket( "/cometd" );
function send( data ) {
return socket.send( dojo.toJson( data ) );
}
socket.on( "connect", function () {
// send a handshake
send( [
{
"channel":"/meta/handshake",
"version":"1.0",
"minimumVersion":"1.0beta",
"supportedConnectionTypes":["long-polling"] // or ["callback-polling"] for x-domain
}
] )
socket.on( "message", function ( data ) {
// wait for the response so we can connect with the provided client id
data = dojo.fromJson( data );
if ( data.error ) {
throw new Error( error );
}
// get the client id for all future messages
clientId = data.clientId;
// send a connect message
send( [
{
"channel":"/meta/connect",
"clientId":clientId,
"connectionType":"long-polling"
},
{ // also send a subscription message
"channel":"/meta/subscribe",
"clientId":clientId,
"subscription":"/foo/**"
}
] );
socket.on( "message", function ( data ) {
alert( "message from server " + data )
} );
} );
} );
</script>
</body>
</html>
You are mixing AMD and old-style module syntax. The new, AMD style, require will not create a global variable for your namespace, like the old dojo.require did.
Either rewrite the code to fully use the new AMD style or remove the async=true flag you added when loading dojo to re-enable support for the old module style.
Anyway, it should not be hard to rewrite this in AMD style...
require([
'dojo/_base/json', //_base is for things that used to be in the root dojo namespace.
'dojox/socket'
],function(
json,
dojox_socket
){
var socket = dojox_socket( "/cometd" );
function send( data ) {
return socket.send( json.toJson( data ) );
}
// and so on...
});
(BTW, you can also remove the "parseOnLoad" flag if you aren't using any declarative widgets in your original html)