I'm using the 'timeupdate' event listener to sync a subtitle file with audio.
It is working currently, but I'd like to adjust it to where it is just highlighting the corresponding sentence in a large paragraph instead of deleting the entire span and replacing it with just the current sentence. This is the sort of functionality I am trying to replicate: https://j.hn/lab/html5karaoke/dream.html (see how it only highlights the section that it is currently on).
This is made complicated due to timeupdate constantly checking multiple times a second.
Here is the code:
var audioSync = function (options) {
var audioPlayer = document.getElementById(options.audioPlayer);
var subtitles = document.getElementById(options.subtitlesContainer);
var syncData = [];
var init = (function () {
return fetch(new Request(options.subtitlesFile))
.then((response) => response.text())
.then(createSubtitle);
})();
function createSubtitle(text) {
var rawSubTitle = text;
convertVttToJson(text).then((result) => {
var x = 0;
for (var i = 0; i < result.length; i++) {
if (result[i].part && result[i].part.trim() != '') {
syncData[x] = result[i];
x++;
}
}
});
}
audioPlayer.addEventListener('timeupdate', function (e) {
syncData.forEach(function (element, index, array) {
if (
audioPlayer.currentTime * 1000 >= element.start &&
audioPlayer.currentTime * 1000 <= element.end
) {
while (subtitles.hasChildNodes()) {
subtitles.removeChild(subtitles.firstChild);
}
var el = document.createElement('span');
el.setAttribute('id', 'c_' + index);
el.innerText = syncData[index].part + '\n';
el.style.background = 'yellow';
subtitles.appendChild(el);
}
});
});
};
new audioSync({
audioPlayer: 'audiofile', // the id of the audio tag
subtitlesContainer: 'subtitles', // the id where subtitles should show
subtitlesFile: './sample.vtt', // the path to the vtt file
});
I'm trying to get the (load in order) example to work. Here is my code.
I load snap.js and then my code in loadsvg.js it has my plugin. Then main.js with my code calling the function. I get a error in console that says "base.loadFilesDisplayOrdered is not a function". So it can't find it any help will be appreciated. Thanks
Snap.plugin( function( Snap, Element, Paper, global ) {
function addLoadedFrags( whichSVG, fragList, runWhenFinishedFunc ) { // This is called once all the loaded frags are complete
for( var count = 0; count < fragList.length; count++ ) {
myEl = whichSVG.append( fragList[ count ] );
}
runWhenFinishedFunc();
}
Paper.prototype.loadFilesDisplayOrdered = function( list, afterAllLoadedFunc, onEachElementLoadFunc ) {
var image, fragLoadedCount = 0, listLength = list.length, fragList = new Array(), whichSVG = this;
for( var count = 0; count < listLength; count++ ) {
(function() {
var whichEl = count,
fileName = list[ whichEl ],
image = Snap.load( fileName, function ( loadedFragment ) {
fragLoadedCount++;
onEachElementLoadFunc( loadedFragment, fileName );
fragList[ whichEl ] = loadedFragment;
if( fragLoadedCount >= listLength ) {
addLoadedFrags( whichSVG, fragList, afterAllLoadedFunc );
}
} );
})();
}
};
});
Then i call it in main.js
var base = Snap("#svgout");
console.log(base);
var myLoadList = [ "svgs/layer.svg", "svgs/cutout.svg" ];
var myDisplayList = { "Bird.svg": "zoom", "Dreaming_tux.svg": "fade" };
base.loadFilesDisplayOrdered( myLoadList, onAllLoaded, onEachLoaded );
The problem is, you are trying to create Snap into a div element. Snap only works on SVG elements.
Change,
<div id="svgout"></div>
to
<svg id="svgout"></svg>
And the error should go away.
jsfiddle
I have a slideshow on my website with left and right buttons.
Like this (http://i.prntscr.com/863ad10cfd4e4f1ea9b90721cc6582e8.png).
I am using angular to change the image on left and right.
As you can see in the function I increase the value
/*SlideShow Pictures*/
$scope.picture_1 = "./images/photos/watch.jpg";
$scope.picture_2 = "./images/photos/watch.jpg";
$scope.picture_3 = "./images/photos/watch.jpg";
$scope.picture_4 = "./images/photos/watch.jpg";
$scope.picture = $scope.picture_1;
$scope.picture_value = 1;
$scope.image_change_right = function () {
if ($scope.picture_value < 4)
{
$scope.picture_value = $scope.picture_value + 1;
$scope.picture = ('$scope.picture_' + $scope.picture_value);
console.log($scope.picture_value);
}
else{
$scope.picture_value = 1;
$scope.picture = ('$scope.picture_' + $scope.picture_value);
console.log($scope.picture_value);
}
}
Above is the function called for button right press.
The function increases the variable by 1 and adds it to the string to call the new variable. In the console log it looks great! However I think it is only showing as a string --- it is not actually setting the value of scope.picture to the variable.
How can I set this to not be a string but as a valid variable?
Thanks everyone!
A better way would be like this:
The Controller:
// The array of picture links.
$scope.pictures = [
"./images/photos/watch.jpg",
"./images/photos/watch.jpg",
"./images/photos/watch.jpg",
"./images/photos/watch.jpg"
];
$scope.current = 0; // Initialize the current pictures place in the array.
$scope.picture = $scope.pictures[$scope.current]; // Set the current picture.
// The direction is either 1 or -1;
$scope.changePicture = function (direction) {
$scope.current += direction; // add or remove one depending on direction.
$scope.current %= $scope.pictures.length; // Normalize the number based on the length of the pictures array.
console.log($scope.picture);
}
The Html:
<img src="{{picture}}">
<button ng-click="changePicture(1)">Next</button>
<button ng-click="changePicture(-1)">Previous</button>
Why don't you use an array with image links like this?
/*SlideShow Pictures*/
$scope.pictures = ["./images/photos/watch.jpg", "./images/photos/watch.jpg", "./images/photos/watch.jpg", "./images/photos/watch.jpg"];
$scope.picture = $scope.pictures[0];
$scope.picture_value = 0;
$scope.image_change_right = function () {
if ($scope.picture_value < 4)
{
$scope.picture_value = $scope.picture_value + 1;
$scope.picture = $scope.pictures[$scope.picture_value];
console.log($scope.picture_value);
}
else{
$scope.picture_value = 0;
$scope.picture = $scope.pictures[$scope.picture_value];
console.log($scope.picture_value);
}
}
I have a UIWebView with an HTML page completely loaded. The UIWebView has a frame of 320 x 480 and scrolls horizontally. I can get the current offset a user is currently at. I would like to find the closest anchor using the XY offset so I can "jump to" that anchors position. Is this at all possible? Can someone point me to a resource in Javascript for doing this?
<a id="p-1">Text Text Text Text Text Text Text Text Text<a id="p-2">Text Text Text Text Text Text Text Text Text ...
Update
My super sad JS code:
function posForElement(e)
{
var totalOffsetY = 0;
do
{
totalOffsetY += e.offsetTop;
} while(e = e.offsetParent)
return totalOffsetY;
}
function getClosestAnchor(locationX, locationY)
{
var a = document.getElementsByTagName('a');
var currentAnchor;
for (var idx = 0; idx < a.length; ++idx)
{
if(a[idx].getAttribute('id') && a[idx+1])
{
if(posForElement(a[idx]) <= locationX && locationX <= posForElement(a[idx+1]))
{
currentAnchor = a[idx];
break;
}
else
{
currentAnchor = a[0];
}
}
}
return currentAnchor.getAttribute('id');
}
Objective-C
float pageOffset = 320.0f;
NSString *path = [[NSBundle mainBundle] pathForResource:#"GetAnchorPos" ofType:#"js"];
NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[webView stringByEvaluatingJavaScriptFromString:jsCode];
NSString *execute = [NSString stringWithFormat:#"getClosestAnchor('%f', '0')", pageOffset];
NSString *anchorID = [webView stringByEvaluatingJavaScriptFromString:execute];
[UPDATE] I rewrote the code to match all the anchors that have an id, and simplified the comparison of the norm of the vectors in my sortByDistance function.
Check my attempt on jsFiddle (the previous one was here ).
The javascript part :
// findPos : courtesy of #ppk - see http://www.quirksmode.org/js/findpos.html
var findPos = function(obj) {
var curleft = 0,
curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while ((obj = obj.offsetParent)) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft, curtop];
};
var findClosestAnchor = function (anchors) {
var sortByDistance = function(element1, element2) {
var pos1 = findPos( element1 ),
pos2 = findPos( element2 );
// vect1 & vect2 represent 2d vectors going from the top left extremity of each element to the point positionned at the scrolled offset of the window
var vect1 = [
window.scrollX - pos1[0],
window.scrollY - pos1[1]
],
vect2 = [
window.scrollX - pos2[0],
window.scrollY - pos2[1]
];
// we compare the length of the vectors using only the sum of their components squared
// no need to find the magnitude of each (this was inspired by Mageek’s answer)
var sqDist1 = vect1[0] * vect1[0] + vect1[1] * vect1[1],
sqDist2 = vect2[0] * vect2[0] + vect2[1] * vect2[1];
if ( sqDist1 < sqDist2 ) return -1;
else if ( sqDist1 > sqDist2 ) return 1;
else return 0;
};
// Convert the nodelist to an array, then returns the first item of the elements sorted by distance
return Array.prototype.slice.call( anchors ).sort( sortByDistance )[0];
};
You can retrieve and cache the anchors like so when the dom is ready : var anchors = document.body.querySelectorAll('a[id]');
I’ve not tested it on a smartphone yet but I don’t see any reasons why it wouldn’t work.
Here is why I used the var foo = function() {}; form (more javascript patterns).
The return Array.prototype.slice.call( anchors ).sort( sortByDistance )[0]; line is actually a bit tricky.
document.body.querySelectorAll('a['id']') returns me a NodeList with all the anchors that have the attribute "id" in the body of the current page.
Sadly, a NodeList object does not have a "sort" method, and it is not possible to use the sort method of the Array prototype, as it is with some other methods, such as filter or map (NodeList.prototype.sort = Array.prototype.sort would have been really nice).
This article explains better that I could why I used Array.prototype.slice.call to turn my NodeList into an array.
And finally, I used the Array.prototype.sort method (along with a custom sortByDistance function) to compare each element of the NodeList with each other, and I only return the first item, which is the closest one.
To find the position of the elements that use fixed positionning, it is possible to use this updated version of findPos : http://www.greywyvern.com/?post=331.
My answer may not be the more efficient (drdigit’s must be more than mine) but I preferred simplicity over efficiency, and I think it’s the easiest one to maintain.
[YET ANOTHER UPDATE]
Here is a heavily modified version of findPos that works with webkit css columns (with no gaps):
// Also adapted from PPK - this guy is everywhere ! - check http://www.quirksmode.org/dom/getstyles.html
var getStyle = function(el,styleProp)
{
if (el.currentStyle)
var y = el.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
return y;
}
// findPos : original by #ppk - see http://www.quirksmode.org/js/findpos.html
// made recursive and transformed to returns the corect position when css columns are used
var findPos = function( obj, childCoords ) {
if ( typeof childCoords == 'undefined' ) {
childCoords = [0, 0];
}
var parentColumnWidth,
parentHeight;
var curleft, curtop;
if( obj.offsetParent && ( parentColumnWidth = parseInt( getStyle( obj.offsetParent, '-webkit-column-width' ) ) ) ) {
parentHeight = parseInt( getStyle( obj.offsetParent, 'height' ) );
curtop = obj.offsetTop;
column = Math.ceil( curtop / parentHeight );
curleft = ( ( column - 1 ) * parentColumnWidth ) + ( obj.offsetLeft % parentColumnWidth );
curtop %= parentHeight;
}
else {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
}
curleft += childCoords[0];
curtop += childCoords[1];
if( obj.offsetParent ) {
var coords = findPos( obj.offsetParent, [curleft, curtop] );
curleft = coords[0];
curtop = coords[1];
}
return [curleft, curtop];
}
I found a way to make it, without using scrollOffset. It's a bit complicated so if you have any question to understand it just comment.
HTML :
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a />Text Text Text Text Text Text Text Text Text
<br /><br /><br /><br /><br />
<a />Text Text Text Text Text Text Text Text Text
</body>
CSS :
body
{
height:3000px;
}
JS :
var tempY;
function getClosestAnchor(e)
{
if((window.event?event.keyCode:e.which)!=97)return;
var allAnchors=document.getElementsByTagName("a");
var allDiff=[];
for(var a=0;a<allAnchors.length;a++)allDiff[a]=margeY(allAnchors[a])-tempY;
var smallest=allDiff[0];
for(var a=1;a<allDiff.length;a++)
{
if(Math.abs(smallest)>Math.abs(allDiff[a]))
{
smallest=allDiff[a];
}
}
window.scrollBy(0,smallest);
}
function margeY(obj)
{
var posY=0;
if(!obj.offsetParent)return;
do posY+=obj.offsetTop;
while(obj=obj.offsetParent);
return posY;
}
function update(e)
{
if(e.pageY)tempY=e.pageY;
else tempY=e.clientY+(document.documentElement.scrollTop||document.body.scrollTop)-document.documentElement.clientTop;
}
window.onkeypress=getClosestAnchor;
window.onmousemove=update;
Here is a fiddle demonstration : http://jsfiddle.net/jswuC/
Bonus : You don't have to specify an id to all the anchors.
Phew! I finished!
JS :
var x=0,y=0;//Here are the given X and Y, you can change them
var idClosest;//Id of the nearest anchor
var smallestIndex;
var couplesXY=[];
var allAnchors;
var html=document.getElementsByTagName("html")[0];
html.style.width="3000px";//You can change 3000, it's to make the possibility of horizontal scroll
html.style.height="3000px";//Here too
function random(min,max)
{
var nb=min+(max+1-min)*Math.random();
return Math.floor(nb);
}
function left(obj)//A remixed function of this site http://www.quirksmode.org/js/findpos.html
{
if(obj.style.position=="absolute")return parseInt(obj.style.left);
var posX=0;
if(!obj.offsetParent)return;
do posX+=obj.offsetLeft;
while(obj=obj.offsetParent);
return posX;
}
function top(obj)
{
if(obj.style.position=="absolute")return parseInt(obj.style.top);
var posY=0;
if(!obj.offsetParent)return;
do posY+=obj.offsetTop;
while(obj=obj.offsetParent);
return posY;
}
function generateRandomAnchors()//Just for the exemple, you can delete the function if you have already anchors
{
for(var a=0;a<50;a++)//You can change 50
{
var anchor=document.createElement("a");
anchor.style.position="absolute";
anchor.style.width=random(0,100)+"px";//You can change 100
anchor.style.height=random(0,100)+"px";//You can change 100
anchor.style.left=random(0,3000-parseInt(anchor.style.width))+"px";//If you changed 3000 from
anchor.style.top=random(0,3000-parseInt(anchor.style.height))+"px";//the top, change it here
anchor.style.backgroundColor="black";
anchor.id="Anchor"+a;
document.body.appendChild(anchor);
}
}
function getAllAnchors()
{
allAnchors=document.getElementsByTagName("a");
for(var a=0;a<allAnchors.length;a++)
{
couplesXY[a]=[];
couplesXY[a][0]=left(allAnchors[a]);
couplesXY[a][1]=top(allAnchors[a]);
}
}
function findClosestAnchor()
{
var distances=[];
for(var a=0;a<couplesXY.length;a++)distances.push(Math.pow((x-couplesXY[a][0]),2)+Math.pow((y-couplesXY[a][1]),2));//Math formula to get the distance from A to B (http://euler.ac-versailles.fr/baseeuler/lexique/notion.jsp?id=122). I removed the square root not to slow down the calculations
var smallest=distances[0];
smallestIndex=0;
for(var a=1;a<distances.length;a++)if(smallest>distances[a])
{
smallest=distances[a];
smallestIndex=a;
}
idClosest=allAnchors[smallestIndex].id;
alert(idClosest);
}
function jumpToIt()
{
window.scrollTo(couplesXY[smallestIndex][0],couplesXY[smallestIndex][1]);
allAnchors[smallestIndex].style.backgroundColor="red";//Color it to see it
}
generateRandomAnchors();
getAllAnchors();
findClosestAnchor();
jumpToIt();
Fiddle : http://jsfiddle.net/W8LBs/2
PS : If you open this fiddle on a smartphone, it doesn't work (I don't know why) but if you copy this code in a sample on a smartphone, it works (but you must specify the <html> and the <body> section).
This answer has not received enough attention.
Complete sample, fast (binary search) with caching for positions.
Fixed height and width, id of the closest anchor and scrollto
<!DOCTYPE html>
<html lang="en">
<head>
<meta>
<title>Offset 2</title>
<style>
body { font-family:helvetica,arial; font-size:12px; }
</style>
<script>
var ui = reqX = reqY = null, etop = eleft = 0, ref, cache;
function createAnchors()
{
if (!ui)
{
ui = document.getElementById('UIWebView');
reqX = document.getElementById('reqX');
reqY = document.getElementById('reqY');
var h=[], i=0;
while (i < 1000)
h.push('<a>fake anchor ... ',i,'</a> <a href=#>text for anchor <b>',(i++),'</b></a> ');
ui.innerHTML = '<div style="padding:10px;width:700px">' + h.join('') + '</div>';
cache = [];
ref = Array.prototype.slice.call(ui.getElementsByTagName('a'));
i = ref.length;
while (--i >= 0)
if (ref[i].href.length == 0)
ref.splice(i,1);
}
}
function pos(i)
{
if (!cache[i])
{
etop = eleft = 0;
var e=ref[i];
if (e.offsetParent)
{
do
{
etop += e.offsetTop;
eleft += e.offsetLeft;
} while ((e = e.offsetParent) && e != ui)
}
cache[i] = [etop, eleft];
}
else
{
etop = cache[i][0];
eleft = cache[i][1];
}
}
function find()
{
createAnchors();
if (!/^\d+$/.test(reqX.value))
{
alert ('I need a number for X');
return;
}
if (!/^\d+$/.test(reqY.value))
{
alert ('I need a number for Y');
return;
}
var
x = reqX.value,
y = reqY.value,
low = 0,
hi = ref.length + 1,
med,
limit = (ui.scrollHeight > ui.offsetHeight) ? ui.scrollHeight - ui.offsetHeight : ui.offsetHeight - ui.scrollHeight;
if (y > limit)
y = limit;
if (x > ui.scrollWidth)
x = (ui.scrollWidth > ui.offsetWidth) ? ui.scrollWidth : ui.offsetWidth;
while (low < hi)
{
med = (low + ((hi - low) >> 1));
pos(med);
if (etop == y)
{
low = med;
break;
}
if (etop < y)
low = med + 1;
else
hi = med - 1;
}
var ctop = etop;
if (eleft != x)
{
if (eleft > x)
while (low > 0)
{
pos(--low);
if (etop < ctop || eleft < x)
{
pos(++low);
break;
}
}
else
{
hi = ref.length;
while (low < hi)
{
pos(++low);
if (etop > ctop || eleft > x)
{
pos(--low);
break;
}
}
}
}
ui.scrollTop = etop - ui.offsetTop;
ui.scrollLeft = eleft - ui.offsetLeft;
ref[low].style.backgroundColor = '#ff0';
alert(
'Requested position: ' + x + ', ' + y +
'\nScrollTo position: ' + ui.scrollLeft + ', '+ ui.scrollTop +
'\nClosest anchor id: ' + low
);
}
</script>
</head>
<body>
<div id=UIWebView style="width:320px;height:480px;overflow:auto;border:solid 1px #000"></div>
<label for="req">X: <input id=reqX type=text size=5 maxlength=5 value=200></label>
<label for="req">Y: <input id=reqY type=text size=5 maxlength=5 value=300></label>
<input type=button value="Find closest anchor" onclick="find()">
</body>
</html>
I need to adjust the script from http://javascript.about.com/library/blcvert.htm to change direction of scrolling to DOWN.
Could anybody help?
Of course, it would be also helpful if anybody knows/have some other script which produces the same effect.
Thanx
P.S. the script (in readable format is):
var imgAry1 = ['img1.png','img2.png'];
function startCloud() {
new mq('clouds', imgAry1, 380);
mqRotate(mqr);
}
$(document).ready(function() {
startCloud();
});
var mqr = [];
function mq(id, ary, heit) {
this.mqo=document.getElementById(id);
var wid = this.mqo.style.width;
this.mqo.onmouseout=function() { mqRotate(mqr); };
this.mqo.onmouseover=function() { clearTimeout(mqr[0].TO); };
this.mqo.ary=[];
var maxw = ary.length;
for (var i=0;i<maxw;i++) {
this.mqo.ary[i]=document.createElement('img');
this.mqo.ary[i].src=ary[i];
this.mqo.ary[i].style.position = 'absolute';
this.mqo.ary[i].style.top = (heit*i)+'px';
this.mqo.ary[i].style.height = heit+'px';
this.mqo.ary[i].style.width = wid;
this.mqo.appendChild(this.mqo.ary[i]);
}
mqr.push(this.mqo);
}
function mqRotate(mqr) {
if (!mqr) return;
for (var j=mqr.length - 1; j > -1; j--) {
maxa = mqr[j].ary.length;
for (var i=0;i<maxa;i++) {
var x = mqr[j].ary[i].style;
x.top=(parseInt(x.top,10)-1)+'px';
}
var y = mqr[j].ary[0].style;
if (parseInt(y.top,10)+parseInt(y.height,10)<0) {
var z = mqr[j].ary.shift();
z.style.top = (parseInt(z.style.top) + parseInt(z.style.height)*maxa) + 'px';
mqr[j].ary.push(z);
}
}
mqr[0].TO=setTimeout('mqRotate(mqr)',10);
}
On this line:
x.top=(parseInt(x.top,10)-1)+'px';
it says that you take x.top in pixels, parse out the number, subtract one and add the 'px' again. The element's position from top is decreased by 1 each time, so it goes up. All you need to do for it to go down is to add the one.
x.top=(parseInt(x.top,10)+1)+'px';
I also tested this hypothesis on the page you linked :)