How do I call a function which is within a plugin in Javascript, from ActionScript 3 - actionscript-3

I have a plugin in Javascript, and within this plugin there are many functions. What I want is to call the $.Repro.barraSonido function from ActionScript 3 code. The plugin is this:
(function ($) {
$.fn.Repro = function () {
var parametros = {
ejecucion: false,
lista: null,
audio: 0
};
var tposic = true;
$.Repro = function (opciones) {
$.ropc = $.extend({}, parametros, opciones);
var Metodos = {
Iniciar: function () {
$('#opc_player').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
$.Repro.barra();
$.Repro.volumen();
$.Repro.movPlaylist();
$('#btn_play').on('click', $.Repro.musc_play);
}
};
return Metodos;
};
$.Repro.musc_play = function () {
if (!swf('jrepro').ispausa()) $(this).removeClass('play').addClass('parar');
else $(this).removeClass('parar').addClass('play');
swf('jrepro').pausa();
return false;
};
$.Repro.autoplay = function () {
var e = $('.lista_musica').find('.selecc');
if (e.length == 0) return '';
$.ropc.lista = e.parent();
$('#T-tema').text(e.find('.artista').html());
$('#T-artista').text(e.find('.tema').html());
return new Array(s['s' + e.attr('name')], e.attr('aud'));
}
};
$.Repro.play = function (c) {
if ($.ropc.lista) {
var el = $.ropc.lista.find("li");
if (c != undefined) {
$.ropc.audio = c;
} else if ($('#btn_aleatorio').hasClass('aleatorioS') && el.length > 1) {
var sg = true;
while (sg) {
var rnd = Math.floor(Math.random() * el.length);
if (rnd != $.ropc.audio) sg = false;
}
$.ropc.audio = rnd;
} else if ($('#btn_repetir').hasClass('repetirS')) {
$.ropc.audio = $.ropc.audio;
} else $.ropc.audio = $.ropc.audio >= (el.length - 1) ? 0 : ($.ropc.audio + 1);
var eil = el.eq($.ropc.audio);
el.removeClass('selecc');
eil.addClass('selecc');
$('#T-tema').text(eil.find('.tema').html());
$('#T-artista').text(eil.find('.artista').html());
swf('jrepro').r(s['s' + eil.attr('name')], eil.attr('aud'));
if (swf('jrepro').ispausa()) $('#btn_play').removeClass('play').addClass('parar');
else $('#btn_play').removeClass('parar').addClass('play');
}
};
$.Repro.barraSonido = function (n, total, n2, total2) {
$.Repro.cargaSonido(n2, total2);
if (n <= total) {
var i_tiempo = (n / 1000);
var m = Math.floor(i_tiempo / 60),
s = Math.ceil(i_tiempo % 60);
$("#tinicial").html((m > 9 ? m : 0 + '' + m) + ':' + (s > 9 ? s : 0 + '' + s));
var t_total = (total / 1000),
fm = Math.floor(t_total / 60),
fs = Math.ceil(t_total % 60);
$("#tfinal").html((fm > 9 ? fm : 0 + '' + fm) + ':' + (fs > 9 ? fs : 0 + '' + fs));
if (total > 0 && tposic) {
var pos = Math.round((Math.round(n) * $('#precarga').width()) / (total));
$('.bar_pr').css('width', pos + 'px');
$('#player_puntero').css('left', pos + 'px');
}
}
};
$.Repro.cargaSonido = function (n, total) {
if (total > 0 && $('#precarga').width() < 290) {
var posCarg = Math.round((n * 290) / total);
$('#precarga').css({width: posCarg}, 500);
}
};
$.Repro.barra = function () {
$('.bar_fon').slider({
max: 100,
range: "min",
slide: function (a, c) {
tposic = false;
$('.bar_pr').css('width', c.value + '%');
},
stop: function (a, c) {
swf('jrepro').tie(parseInt($('#player_puntero').css('left')), $('#precarga').width());
tposic = true;
}
});
};
$.Repro.movPlaylist = function () {};
return $.Repro;
}();
})(jQuery);
It doesn't work, and I put the following in the SWF file:
import flash.external.ExternalInterface;
function call_javascript(evt:MouseEvent):void {
ExternalInterface.call("$.Reproductor.barraSonido");//Even with "()"
}
js_btn.addEventListener(MouseEvent.MOUSE_UP, call_javascript);
For testing purposes, in the function $.Reproductor.barraSonido, I added alert("hola");.
The HTML file is:
<script type="text/javascript">
//Here is the plugin
</script>
<object width="300" height="150">
<param name="movie" value="player.swf">
<embed src="player.swf" width="300" height="150">
</embed>
</object>

You can use AS3's External Interface class to communicate with Javascript (both to and from). You can read more about External Interface here:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html
For your needs, something such as:
if(ExternalInterface.available) ExternalInterface.call('$.Repro. barraSonido', ...arguments);
will call the function. You'll need to replace the ...arguments in the above example with the parameters you'd like to pass to the barraSonido function.

Related

How to find the latitude and longitude of the beginning and the end of a street?

I'm trying to find the coordinates (LAT LONG) of a street from the beginning to the end of the street with the GOOGLE MAPS API. I can not find some simillaria on the net
Thanks
I use this code :
function findEndAddr(addr) {
for (var i = 500;;) {
var Http = new XMLHttpRequest();
var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + i.toString().split('.')[0] + addr.replace(/\s/g, '') + '&key=KEY_API';
console.log(url);
Http.open("GET", url, false);
Http.send(null);
if (Http.status == 200 && Http.readyState == 4) {
var resp = JSON.parse(Http.responseText);
if (resp['results'][0]['address_components'][0]['types'][0] != 'street_number') {
i = i / 2;
}
else {
return findEndAddrNext(addr, i, i, 2);
}
}
}
}
And I use this function :
function findEndAddrNext(addr, i, nb, div) {
var Http = new XMLHttpRequest();
var url;
url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + nb.toString().split('.')[0] + addr.replace(/\s/g, '') + '&key=KEY-API';
console.log(url);
Http.open("GET", url, false);
Http.send(null);
if (Http.status == 200 && Http.readyState == 4) {
var resp = JSON.parse(Http.responseText);
var index = 0;
for (let cpt = 0; cpt < resp['results'].length; cpt++) {
console.log(getThing(resp['results'][cpt]['address_components'], 'postal_code'));
console.log(addr.split(',')[2]);
if (getThing(resp['results'][cpt]['address_components'], 'locality') == addr.split(',')[1]) {
index = cpt;
break;
}
}
if (resp['results'][index]['address_components'][0]['types'][0] == 'street_number') {
i = nb;
if ((nb / div) <= 2) {
if (getThing(resp['results'][index]['address_components'], 'locality') != addr.split(',')[1]) {
oui = searchFinal(getThing(resp['results'][index]['address_components'], 'street_number'), addr);
return;
}
oui = [resp['results'][index]['geometry']['location'].lat, resp['results'][0]['geometry']['location'].lng];
console.log(resp);
return;
}
nb = nb + (nb / div);
findEndAddrNext(addr, i, nb, div);
}
if (resp['results'][index]['address_components'][0]['types'][0] != 'street_number') {
div *= 2;
nb = i + (i / div);
findEndAddrNext(addr, i, nb, div);
}
}
}

Getting NaN when a directive is used in angularJs

I am using a directive to show the number count effect for my dashboard when i used the directive for the h3 i am getting the result as NaN. when i remove the directive from the h3 i am getting the correct output.
When i looked into the directive i can the the value is get from element which shows the value as NaN. can anyone tell me what is wrong in the code?
Output with directive:
<h3 animate-numbers="" class="ng-binding">NaN</h3>
Html:
<h3 animate-numbers>{{vm.dashboard.no_of_applications}}</h3>
Controller:
vm.dashboard = {
no_of_users: 0,
no_of_applications: 0,
no_of_departments: 0,
no_of_schemes: 0,
};
Directive:
'use strict';
angular.module('ss')
.directive('animateNumbers', function ($timeout, $log) {
return {
replace: false,
scope: true,
link: function (scope, element) {
var e = element[0];
$log.log('e is', e);
var refreshInterval = 30;
var duration = 1000; //milliseconds
var number = parseInt(e.innerText);
var step = 0;
var num = 0;
var steps = Math.ceil(duration / refreshInterval);
var increment = (number / steps);
var percentCompleted = 0;
var lastNumberSlowCount = 3;
if (number > lastNumberSlowCount) {
number = number - lastNumberSlowCount;
}
scope.timoutId = null;
var slowCounter = function () {
scope.timoutId = $timeout(function () {
lastNumberSlowCount --;
if (lastNumberSlowCount < 0) {
$timeout.cancel(scope.timoutId);
} else {
number++;
e.textContent = number;
slowCounter();
}
}, 500);
};
var counter = function () {
scope.timoutId = $timeout(function () {
num += increment;
percentCompleted = Math.round((num / number) * 100);
if (percentCompleted > 60 && percentCompleted < 80) {
refreshInterval = refreshInterval + 10;
} else if (percentCompleted > 90) {
refreshInterval = 200;
}
step++;
if (step >= steps) {
$timeout.cancel(scope.timoutId);
num = number;
e.textContent = number;
if (number > lastNumberSlowCount) {
slowCounter();
}
} else {
e.textContent = Math.round(num);
counter();
}
}, refreshInterval);
};
counter();
return true;
}
};
});

Progressbar in angular

I want to make Progressbar in Angular.js in decimal format, simple format, times based Progressbar. Someone could pls help !
E.g.
Start Timer {{ counter }}/{{ max }} = {{ (counter/max)*100 }}%
Start Timer 20/30 = 66.66666666666666%
Here is example.js:
angular.module('plunker', ['ui.bootstrap']);
var ProgressDemoCtrl = function ($scope) {
$scope.max = 200;
$scope.random = function () {
var value = Math.floor((Math.random() * 100) + 1);
var type;
if (value < 25) {
type = 'success';
} else if (value < 50) {
type = 'info';
} else if (value < 75) {
type = 'warning';
} else {
type = 'danger';
}
$scope.showWarning = (type === 'danger' || type === 'warning');
$scope.dynamic = value;
$scope.type = type;
};
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('ProgressDemoCtrl', function ($scope) {
$scope.value = 40;
$scope.state = "progress-bar-success";
$scope.myStyle = {width: $scope.value + '%'};
});
$scope.random();
$scope.randomStacked = function() { $scope.stacked = [];
var types = ['success', 'info', 'warning', 'danger']; for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) { var index = Math.floor((Math.random() * 4));
$scope.stacked.push({ value: Math.floor((Math.random() * 30) + 1),
type: types[index] }); } }; $scope.randomStacked(); };
var app = angular.module('progressApp',['nprogress']); var MainCtrl = function($scope,ngProgress){ }
I use this round progress ba directive, works pretty well:
http://www.youtube.com/watch?v=w2qrYL0Le24
https://github.com/angular-directives/angular-round-progress-directive
If you need a rectangular one give me a buzz I, have a custom directive implemented.
If you need two decimal numbers you only have to adjust the font size.
Test with two decimals:
Code to change (configuring ang:roundprogress directive)
data-round-progress-label-font="80pt Arial"
Whole markup
<div ang:round:progress data-round-progress-model="roundProgressData"
data-round-progress-width="500"
data-round-progress-height="500"
data-round-progress-outer-circle-width="40"
data-round-progress-inner-circle-width="10"
data-round-progress-outer-circle-radius="200"
data-round-progress-inner-circle-radius="140"
data-round-progress-label-font="80pt Arial"
data-round-progress-outer-circle-background-color="#505769"
data-round-progress-outer-circle-foreground-color="#12eeb9"
data-round-progress-inner-circle-color="#505769"
data-round-progress-label-color="#fff"></div>

play audio range in html5

I would like to be able to have buttons that can play certain audio ranges from a larger file. Something like:
<button onclick="playClip('http://blah/source1.mp3', 2.5, 3.0, 1.0)">Play clip 1</button>
<button onclick="playClip('http://blah/source2.mp3', 10.0, 2.0, 0.5)">Play clip 2 slow</button>
where playClip has a pattern like this:
function playClip(src, startOffset, length, rate) {
// What to put here?
}
Or instead of a length, an ending offset.
Can some one point me to code that can do that, or help me write it? The closest I could find is https://gist.github.com/remy/753003/download# but I need different sized clips, from possibly different files, and with a playback rate specified. I'm afraid I've limited experience with Javascript.
I'm trying to replace a Silverlight app that does this.
Thanks.
-John
Either use Media Fragments URI syntax:
var src,
startOffset,
endOffset,
playbackRate,
audio = new Audio(src + '#t=' + startOffset + ',' + endOffset);
audio.onloadedmetadata = function() {
audio.playbackRate = playbackRate;
audio.play();
};
or timeupdate event:
var audio = new Audio( ... ),
startOffset,
endOffset,
playbackRate;
audio.onloadedmetadata = function() {
audio.playbackRate = playbackRate;
audio.currentTime = startOffset;
audio.play();
};
audio.ontimeupdate = function() {
if (audio.currentTime >= endOffset) {
audio.pause();
}
};
References:
Specifying playback range
Jumping to time offsets in HTML5 video
Here's an extract of my current code, which uses both the audio control's events and timeout to make sure the audio stops. There's a reference to a volume slider you might need to trim.
var jt_audioControl;
var jt_audioSource;
var jt_audioFiles;
var jt_audioFileIndex;
var jt_audioFile;
var jt_audioStartTime;
var jt_audioEndTime;
var jt_audioPlaybackRate;
var jt_audioTimeoutHandle;
var jt_audioLink;
var jt_audioMimeType;
var jt_audioMediaType;
var jt_volumeSlider;
function jt_onAudioTimeUpdate() {
if (jt_audioEndTime > 0.0) {
if (jt_audioControl.currentTime >= jt_audioEndTime) {
//alert('stopped: jt_audioControl.currentTime = ' + jt_audioControl.currentTime + ' jt_audioEndTime = ' + jt_audioEndTime);
jt_audioControl.pause();
//jt_audioStartTime = jt_audioEndTime = 0.0;
}
}
}
function jt_onAudioCanPlay() {
jt_audioControl.pause();
jt_audioControl.currentTime = jt_audioStartTime;
jt_audioControl.defaultPlaybackRate = jt_audioPlaybackRate;
jt_audioControl.playbackRate = jt_audioPlaybackRate;
jt_audioControl.play();
jt_audioControl.currentTime = jt_audioStartTime;
jt_volumeSliderChanged(); // Set initial value to slider.
var timeout = (((jt_audioEndTime - jt_audioStartTime)) / jt_audioPlaybackRate) * 1000;
//alert('jt_audioEndTime = ' + jt_audioEndTime + ', timeout = ' + timeout);
if (jt_audioEndTime > 0.0) {
jt_audioTimeoutHandle = setTimeout(jt_onAudioEnded, timeout);
//alert('jt_audioTimeoutHandle = ' + jt_audioTimeoutHandle);
}
else if (jt_audioTimeoutHandle != null) {
clearTimeout(jt_audioTimeoutHandle);
jt_audioTimeoutHandle = null;
}
}
function jt_onAudioEnded() {
//alert('ended called');
if (jt_audioFiles == null)
return;
while (jt_audioControl.position < jt_audioControl.duration)
;
jt_audioFileIndex = jt_audioFileIndex + 1;
if (jt_audioFileIndex < jt_audioFiles.length) {
jt_createAudio(jt_audioFiles[jt_audioFileIndex]);
}
else {
jt_audioControl.pause();
jt_audioFiles = null;
jt_audioFileIndex = 0;
}
}
function jt_onAudioError(e) {
var msg;
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
msg = 'You aborted the video playback.';
break;
case e.target.error.MEDIA_ERR_NETWORK:
msg = 'A network error caused the video download to fail part-way.';
break;
case e.target.error.MEDIA_ERR_DECODE:
msg = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support.';
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
msg = 'The video could not be loaded, either because the server or network failed or because the format is not supported.';
break;
default:
msg = 'An unknown error occurred.';
break;
}
alert('Error loading media: ' + msg + ' Media file: ' + jt_audioFile + ' MIME type: ' + jt_audioMimeType);
}
function jt_addSource(url) {
var srcUrl;
var doConvertCheck = false;
var offset = url.lastIndexOf(".");
if (offset == -1) {
if (jt_audioSource == null) {
jt_audioSource = document.createElement('source');
jt_audioControl.appendChild(jt_audioSource);
}
jt_audioMimeType = 'audio/mpeg3';
jt_audioMediaType = 'audio/mpeg3';
jt_audioSource.type = jt_audioMediaType;
jt_audioSource.src = url;
jt_audioControl.load();
return;
}
var base = url.substr(0, offset);
var ext = url.substr(offset).toLowerCase();
var newExt = ext;
if (jt_audioControl.canPlayType('audio/mpeg3')) {
jt_audioMimeType = 'audio/mpeg3';
jt_audioMediaType = 'audio/mpeg3';
if (ext != '.mp3')
newExt = '-aa.mp3';
}
else if (jt_audioControl.canPlayType('audio/mpeg')) {
jt_audioMimeType = 'audio/mpeg3';
jt_audioMediaType = 'audio/mpeg';
if (ext != '.mp3')
newExt = '-aa.mp3';
}
else if (jt_audioControl.canPlayType('audio/mp3')) {
jt_audioMimeType = 'audio/mpeg3';
jt_audioMediaType = 'audio/mp3';
if (ext != '.mp3')
newExt = '-aa.mp3';
}
else if (jt_audioControl.canPlayType('audio/ogg')) {
jt_audioMimeType = 'audio/ogg';
jt_audioMediaType = 'audio/ogg';
if (ext != '.ogg')
newExt = '-aa.ogg';
}
else {
alert('Sorry, can not play file: ' + url);
}
srcUrl = base + newExt;
if (srcUrl.lastIndexOf('~', 0) === 0) {
if (window.location.hostname == '') {
srcUrl = srcUrl.substr(2);
}
else {
var url = 'http://' + window.location.hostname;
if (window.location.port.toString() != '')
url = usrl + ':' + window.location.port.toString()
srcUrl = url + srcUrl.substr(1);
}
}
//alert('srcUrl = ' + srcUrl);
if (jt_audioSource == null) {
jt_audioSource = document.createElement('source');
jt_audioControl.appendChild(jt_audioSource);
}
jt_audioSource.type = jt_audioMediaType;
if (doConvertCheck) {
jt_audioLink = "/ConvertCheck?path=" + srcUrl + "&" + "mimeType=" + jt_audioMimeType
jt_audioSource.src = jt_audioLink;
}
else {
jt_audioSource.src = srcUrl;
}
jt_audioControl.load();
}
function jt_extractTimeRange(url) {
var rangeFieldIndex = url.lastIndexOf("#t");
if (rangeFieldIndex >= 0) {
var rangeString = url.substr(rangeFieldIndex + 2);
var range = rangeString.split(',');
jt_audioStartTime = parseFloat(range[0]);
jt_audioEndTime = parseFloat(range[1]);
}
else {
jt_audioStartTime = 0.0;
jt_audioEndTime = 0.0;
return url;
}
return url.substr(0, rangeFieldIndex);
}
function jt_createAudio(url) {
url = jt_extractTimeRange(url);
if (jt_audioControl == null) {
jt_audioFile = url;
jt_audioControl = new Audio();
// The ontimeupdate handler seems to be called unreliably, so we'll use
// setTimeout as well in the oncanplay handler.
jt_audioControl.ontimeupdate = jt_onAudioTimeUpdate;
jt_audioControl.onloadedmetadata = jt_onAudioCanPlay;
jt_audioControl.onended = jt_onAudioEnded;
jt_audioControl.onerror = jt_onAudioError;
jt_addSource(url);
// We'll let the oncanplay call play once loaded.
}
else if (jt_audioFile != url) {
jt_audioFile = url;
jt_addSource(url);
}
else {
//jt_onAudioLoaded();
jt_audioControl.load();
}
}
function jt_playAudioFile(url) {
jt_audioFiles = null;
jt_audioFileIndex = 0;
jt_audioStartTime = 0.0;
jt_audioEndTime = 0.0;
jt_audioPlaybackRate = 1.0;
jt_createAudio(url);
}
function jt_playSlowAudioFile(url) {
jt_audioFiles = null;
jt_audioFileIndex = 0;
jt_audioStartTime = 0.0;
jt_audioEndTime = 0.0;
jt_audioPlaybackRate = 0.5;
jt_createAudio(url);
}
function jt_playAudioFileList(urls) {
jt_audioFiles = urls;
jt_audioFileIndex = 0;
jt_audioStartTime = 0.0;
jt_audioEndTime = 0.0;
jt_audioPlaybackRate = 1.0;
if ((urls != null) && (urls.length > 0)) {
jt_createAudio(urls[0]);
}
}
function jt_playSlowAudioFileList(urls) {
jt_audioFiles = urls;
jt_audioFileIndex = 0;
jt_audioStartTime = 0.0;
jt_audioEndTime = 0.0;
jt_audioPlaybackRate = 0.5;
if ((urls != null) && (urls.length > 0)) {
jt_createAudio(urls[0]);
}
}
function jt_playAudioFileSegment(url, startTime, endTime) {
jt_audioFiles = null;
jt_audioFileIndex = 0;
url = url + '#t' + startTime.toString() + ',' + endTime.toString();
jt_audioPlaybackRate = 1.0;
jt_createAudio(url);
}
function jt_playSlowAudioFileSegment(url, startTime, endTime) {
jt_audioFiles = null;
jt_audioFileIndex = 0;
url = url + '#t' + startTime.toString() + ',' + endTime.toString();
jt_audioPlaybackRate = 0.5;
jt_createAudio(url);
}
function jt_stopAudio() {
if (jt_audioControl != null)
jt_audioControl.pause();
}
function jt_volumeSliderChanged() {
if (jt_volumeSlider == null) {
jt_volumeSlider = document.getElementById('volumeSlider');
if (jt_volumeSlider == null)
return;
}
var value = jt_volumeSlider.value;
if (jt_audioControl != null)
jt_audioControl.volume = value / 10;
$.ajax({
url: "/Common/SetUserOptionAjax?key=AudioVolume&value=" + value.toString(),
type: "POST"
});
}

jQuery click() each() unique?

I want to have multiple span.play without IDs which can be clicked and play some audio file.
Problem: Display the duration on only the current file $(this)
$('.play').each(function() {
$(this).append('<span class="playIcon"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fairytale_player_play.png/14px-Fairytale_player_play.png"></span><span class="playDur"></span>');
$(this).click(function() {
var file = this.firstChild;
if (file.paused != false) {
//+ stop all others before playing new one
file.play();
} else {
file.pause();
}
file.addEventListener("timeupdate", function() {
var len = file.duration,
ct = file.currentTime,
s = parseInt(ct % 60),
m = parseInt((ct / 60) % 60);
if (s < 10) {
s = '0' + s;
}
$(".playDur").html(' (' + m + ':' + s + ')');
if (ct == len) {
$(".playDur").html('');
}
}, false);
});
});
Test:
http://jsfiddle.net/sQPPP/
http://jsfiddle.net/sQPPP/1/ - using $(this).children( ".foo" )
You need to save .play jQuery object in a variable, as this changes within the addEventListener callback.
http://jsfiddle.net/sQPPP/2/
$('.play').each(function(index) {
var $play = $(this);
$play.append('<span class="playIcon"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Fairytale_player_play.png/14px-Fairytale_player_play.png"></span><span class="playDur"></span>');
$play.click(function() {
var file = this.firstChild;
if (file.paused != false) {
//+ stop all others before playing new one
file.play();
} else {
file.pause();
}
file.addEventListener("timeupdate", function() {
var len = file.duration,
ct = file.currentTime,
s = parseInt(ct % 60),
m = parseInt((ct / 60) % 60);
if (s < 10) {
s = '0' + s;
}
$play.children( ".playDur" ).html(' (' + m + ':' + s + ')');
if (ct == len) {
$play.children( ".playDur" ).html('');
}
}, false);
});
});​