Can I change text contents in the viewer? - autodesk-forge

I understand that access to the db is read-only, but can I change the text that is displayed by the viewer, i.e. overwrite the displayValue attribute of MText elements? Kind regards, Gregor
viewer.getProperties(dbid, (props) => {
// get set of properties for a dbid
// var properties = props.properties is an array of properties
}
{
attributeName: "Contents"
displayCategory: "Text"
displayName: "Contents"
displayValue: "some text i would like to change"
hidden: false
precision: 0
type: 20
units: null
}

Not sure why you want to change the specific text of the item properties. The simplest way is to create a driven class of the ViewerPropertyPanel and override ViewerPropertyPanel.prototype.setNodeProperties.
class MyViewerPropertyPanel extends Autodesk.Viewing.Extensions.ViewerPropertyPanel {
constructor( viewer ) {
super( viwer );
}
setNodeProperties( nodeId ) {
var that = this;
this.propertyNodeId = nodeId;
that.currentModel.getProperties(nodeId, function (result) {
if (!that.viewer)
return;
that.setTitle(result.name);
//!!!<<<<
// Modofy contents of `result.properties` here
//!!!<<<<
that.setProperties(result.properties);
that.highlight(that.viewer.searchText);
that.resizeToContent();
if (that.isVisible()) {
var toolController = that.viewer.toolController,
mx = toolController.lastClickX,
my = toolController.lastClickY,
panelRect = that.container.getBoundingClientRect(),
px = panelRect.left,
py = panelRect.top,
pw = panelRect.width,
ph = panelRect.height,
canvasRect = that.viewer.canvas.getBoundingClientRect(),
cx = canvasRect.left,
cy = canvasRect.top,
cw = canvasRect.width,
ch = canvasRect.height;
if ((px <= mx && mx < px + pw) && (py <= my && my < py + ph)) {
if ((mx < px + (pw / 2)) && (mx + pw) < (cx + cw)) {
that.container.style.left = Math.round(mx - cx) + 'px';
that.container.dockRight = false;
} else if (cx <= (mx - pw)) {
that.container.style.left = Math.round(mx - cx - pw) + 'px';
that.container.dockRight = false;
} else if ((mx + pw) < (cx + cw)) {
that.container.style.left = Math.round(mx - cx) + 'px';
that.container.dockRight = false;
} else if ((my + ph) < (cy + ch)) {
that.container.style.top = Math.round(my - cy) + 'px';
that.container.dockBottom = false;
} else if (cy <= (my - ph)) {
that.container.style.top = Math.round(my - cy - ph) + 'px';
that.container.dockBottom = false;
}
}
}
});
}
}
// Replace propertry panel to our owned
viewer.setPropertyPanel( new MyViewerPropertyPanel( viewer ) );
Enjoy it!

Related

Vue multiple this.function() is not working

This is mine handleMove function which is basically working like
<div class="container" #mousemove="handleMove"></div>
I want to pass Multiple function where i have bold in the code the problem is that when i am doing this.moveSelectedNode(diffX,diffY) the other
this.moveSelectedDecision is not working
The issue is that one Nodes are going in this.moveSelectedDecision and vice versa for the decisions
when i Comment the One this the other this is working Fine
When i comment one this.moveSelectedNode or this.moveSelectedDecision the other one is working all fine
handleMove(e) {
if (this.action.linking) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
[this.draggingLink.mx, this.draggingLink.my] = [this.mouse.x, this.mouse.y];
}
if (this.action.dragging) {
this.mouse.x = e.pageX || e.clientX + document.documentElement.scrollLeft
this.mouse.y = e.pageY || e.clientY + document.documentElement.scrollTop
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.moveSelectedNode(diffX, diffY);
**this.moveSelectedDecision(diffX,diffY);**
console.log('I am here');
}
if (this.action.scrolling) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.scene.centerX += diffX;
this.scene.centerY += diffY;
// this.hasDragged = true
}
},
These are mine moveSelectedNode and moveSelectedDecision function which i am passing up in handleMove
moveSelectedNode(dx, dy) {
let index = this.scene.nodes.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.nodes[index].x + dx / this.scene.scale;
let top = this.scene.nodes[index].y + dy / this.scene.scale;
this.$set(this.scene.nodes, index, Object.assign(this.scene.nodes[index], {
x: left,
y: top,
}));
},
moveSelectedDecision(dx, dy) {
let index = this.scene.decisions.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.decisions[index].x + dx / this.scene.scale;
let top = this.scene.decisions[index].y + dy / this.scene.scale;
this.$set(this.scene.decisions, index, Object.assign(this.scene.decisions[index], {
x: left,
y: top,
}));
},

how to use both this.function in Vue.js

This is mine handleMove function which is basically working like
<div class="container" #mousemove="handleMove"></div>
I want to pass Multiple function where i have bold in the code the problem is that when i am doing this.moveSelectedNode(diffX,diffY) the other
this.moveSelectedDecision is not working
The issue is that one Nodes are going in this.moveSelectedDecision and vice versa for the decisions
when i Comment the One this the other this is working Fine
When i comment one this.moveSelectedNode or this.moveSelectedDecision the other one is working all fine
handleMove(e) {
if (this.action.linking) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
[this.draggingLink.mx, this.draggingLink.my] = [this.mouse.x, this.mouse.y];
}
if (this.action.dragging) {
this.mouse.x = e.pageX || e.clientX + document.documentElement.scrollLeft
this.mouse.y = e.pageY || e.clientY + document.documentElement.scrollTop
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.moveSelectedNode(diffX, diffY);
**this.moveSelectedDecision(diffX,diffY);**
console.log('I am here');
}
if (this.action.scrolling) {
[this.mouse.x, this.mouse.y] = getMousePosition(this.$el, e);
let diffX = this.mouse.x - this.mouse.lastX;
let diffY = this.mouse.y - this.mouse.lastY;
this.mouse.lastX = this.mouse.x;
this.mouse.lastY = this.mouse.y;
this.scene.centerX += diffX;
this.scene.centerY += diffY;
// this.hasDragged = true
}
},
These are mine moveSelectedNode and moveSelectedDecision function which i am passing up in handleMove
moveSelectedNode(dx, dy) {
let index = this.scene.nodes.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.nodes[index].x + dx / this.scene.scale;
let top = this.scene.nodes[index].y + dy / this.scene.scale;
this.$set(this.scene.nodes, index, Object.assign(this.scene.nodes[index], {
x: left,
y: top,
}));
},
moveSelectedDecision(dx, dy) {
let index = this.scene.decisions.findIndex((item) => {
return item.id === this.action.dragging
})
let left = this.scene.decisions[index].x + dx / this.scene.scale;
let top = this.scene.decisions[index].y + dy / this.scene.scale;
this.$set(this.scene.decisions, index, Object.assign(this.scene.decisions[index], {
x: left,
y: top,
}));
},

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"
});
}

How do I call a function which is within a plugin in Javascript, from 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.

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);
});
});​