I've got a problem with this script. I don't know how to make dynamic rgb using this. I am javascript noob. I have used three vars and saved using getElementById. And I dont know how to save it to style from the spans.
var i = 0;
var ii = 20;
var iii = 18;
function increment() {
i++;
document.getElementById('number').innerHTML = i;
if (i==255) {
document.getElementById('number').innerHTML = i--;
}
}
function increment2() {
ii++;
document.getElementById('pica').innerHTML = ii;
if (ii==255) {
document.getElementById('pica').innerHTML = ii--;
}
}
function increment3() {
iii++;
document.getElementById('dick').innerHTML = iii;
if (iii==255) {
document.getElementById('dick').innerHTML = iii--;
}
}
setInterval('increment()', 50);
setInterval('increment2()', 60);
setInterval('increment3()', 55);
var rgb = document.getElementById('rgb').innerHTML;
document.write(rgb);
And this is html:
<div id="rgb">
<span id="number"></span>
<span id="pica"></span>
<span id="dick"></span>
</div>
This is the rgb I need make dynamic:
<div id="id" style="background-color: rgb(255,255,255);
width: 100%; height: 100%;"></div>
JQuery is a javascript plugin very used. With it javascript becomes simplier.
In JQuery you can access to css properties of an object very simply using .css() function
Here you have a big tutorial about JQuery.
Here you have the Stack overflow guide about JQuery.
Try this
var r = $('#number').html();
var g = $('#pica').html();
var b = $('#dick').html();
$("#id").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
Try this
Guidance:
I think your way to code is inappropiate. By using bad variables name and so one, you do not save time. You confuse yourself.
1/ Make unique function that modify a rgb value ex
function increment(value)
{
value += 1;
if (value == 256) {
return 255;
}
return value;
}
2/ Instead of using span maybe another solution exist?
/**
* Where we are storing the colors
*/
const colors = {
red: 0,
green: 0,
blue: 0,
};
/**
* Increment the color by one
*/
function increment(value) {
value += 1;
return value == 256 ? 0 : value;
}
/**
* Gives a random number so we can increase a random color
*/
function getRandomNumber(maxNumber) {
return Math.floor(Math.random() * Math.floor(maxNumber));
}
/**
* Function that's incrementing the colors
*/
function incrementBackground() {
const randomColorIndexToChange = getRandomNumber(Object.keys(colors).length - 1);
const keyOfTheColorToChange = Object.keys(colors)[randomColorIndexToChange];
colors[keyOfTheColorToChange] = increment(colors[keyOfTheColorToChange]);
$('#myDynamicBackground').css(
'background-color',
`rgb(${colors.red}, ${colors.green},${colors.blue})`,
);
setTimeout(incrementBackground, 1);
}
setTimeout(incrementBackground, 1);
#myDynamicBackground {
background-color: rgb(0, 0, 0);
width: 5em;
height: 5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDynamicBackground"></div>
You could leverage the following code, which (after making only minor changes to yours) calls the updateBgColorDynamically() method. Which in turn used the .style.backgroundColor and a string concatenation to update the color.
<html lang="en">
<head>
<meta charset="utf-8">
<title>IrishGeek82 SO Help File</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script>
$(document).ready(function()
{
increment1();
increment2();
increment3();
}
);
</script>
<style type="text/css">
.invalid
{
border:1px solid red;
}
.noSelect
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
</style>
<script type="text/javascript">
var iRed = 0;
var iGreen = 20;
var iBlue = 18;
function increment1()
{
iRed++;
document.getElementById('red').innerHTML = iRed;
if (iRed == 255)
{
document.getElementById('red').innerHTML = 0;
}
updateBgcolorDynamically();
}
function increment2() {
iGreen++;
document.getElementById('green').innerHTML = iGreen;
if (iGreen==255)
{
document.getElementById('green').innerHTML = 0;
}
updateBgcolorDynamically();
}
function increment3()
{
iBlue++;
document.getElementById('blue').innerHTML = iBlue;
if (iBlue == 255)
{
document.getElementById('blue').innerHTML = 0;
}
updateBgcolorDynamically();
}
function updateBgcolorDynamically()
{
document.getElementById("dynamicDiv").style.backgroundColor = "rgb("+iRed+","+iGreen+","+iBlue+")";
}
</script>
</head>
<body>
<div id="rgb">
<span class ="noSelect" id="red" onclick="increment1();">0</span>
<span class ="noSelect" id="green" onclick="increment2();">0</span>
<span class ="noSelect" id="blue" onclick="increment3();">0</span>
<hr>
<div id="dynamicDiv" style="background-color:rgb(255,255,255);min-width: 100%; min-height: 500px;">
</div>
</div>
</body>
</html>
Please let me know if that helps :)
Try this
document.getElementById('id').style.backgroundColor = 'rgb(' + [a,b,c].join(',') + ')';
use HSL It's all you need.
jsBin demo
var $div = document.getElementById('id'),
c = 0;
function changeColor(){
++c; // increment counter
$div.style.backgroundColor = "hsl("+( c%360 )+", 50%, 50%)";
}
setInterval(changeColor, 50);
Simply change the Hue dynamically, while keeping a desired Saturation to 50% and Lightness to 50%.
Hue values are from 0 to 360, (0=red, 360=red) and in between you have all your colors palette.
c%360 (%=Reminder operator) is used to reset our c counter back to 0.
hsl( HUE[0-360] , SATURATION[0-100%] , LIGHTNESS[0-100%]);
Expore also HSLA colors if you need opacity ;)
Related
What my code does:
stays blank for 3 seconds
displayes index 1 of my list of image
loops through the list and restarts at index 0
<div id="background" class="text-center background">
<script type = "text/javascript">
var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["/images/indeximg0.jpg", "/images/indeximg11.jpg", "/images/indeximg33.jpg", "/images/indeximg44.jpg", "/images/indeximg55.jpg"], i = 0;
function changeimage()
{
if (++currentPos >= imagesb.length)
currentPos = 0;
background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
}
setInterval(changeimage, 3000);
</script>
</div>
What I want it to do:
no 3 second blank background delay
starts with index 0
What I tried:
I set currentPos = 4
this fixed the issue with the first image being displayed but the 3 second delay was still there. I also don't like this way of doing it because I would have to manually change currentPos if i add or remove images to the list
I tried to initialize my background before the first div to fix the 3 second back background with he following code:
<script type = "text/javascript">
background.style.backgoundImage= "url(/images/indeximg0.jpg)";
</script>
nothing changed. still had the 3 second delay
You should
Call the function once before the setInterval() and
When doing ++currentPos you are actually incrementing the variable so the first time you set the background, the value is already 1. The easiest way to change that is to set the background before your if test.
var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["https://via.placeholder.com/100", "https://via.placeholder.com/200", "https://via.placeholder.com/300"];
function changeimage() {
background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
if ((++currentPos) >= imagesb.length) {
currentPos = 0;
}
}
changeimage();
setInterval(changeimage, 1000);
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.background {
height: 100%;
width: 100%;
}
<div id="background" class="text-center background"></div>
The following has some SVG squares that march upwards once per second. In Google Chrome it looks fine. In Firefox, the squares shift right and left by about 1 pixel which is not what I intended.
Can anyone help figure out why?
I'm sorry this code snippet is not simpler; this is about as basic as I could go from a much longer file in which I removed all the unrelated aspects.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<style type='text/css'>
.hidden {
display: none;
}
#ticktock {
position: absolute;
top: 550px;
left: 400px;
}
svg rect.cell {
fill: none;
stroke: steelblue;
}
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(event) {
var L = 25;
var maxFacetCount = 8;
var state = {
nexttick: 0,
ticksize: 500,
n: -8,
nx: 8,
wheel: [],
nfacet: maxFacetCount,
init: true,
ticktock: true
};
function update_state(state)
{
if (state.ticktock)
{
if (state.wheel.length >= state.nfacet)
state.wheel.shift();
state.wheel.push({n: ++state.n });
}
}
state.wheel = state.wheel.slice(-1);
function prepare_view(state)
{
var width = 60 + (state.nx+0.5)*(L+2);
var height = 5 + (state.nfacet+0.5)*L;
var svg = d3.select("#wheel-container").append("svg")
.attr("width", width)
.attr("height", height);
var x1 = L*0.5+5;
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
}
prepare_view(state);
function facet_enter(facets, t)
{
var facet = facets.append('g');
for (var i = 0; i < state.nx; ++i)
{
facet.append('rect')
.attr('x',i*L)
.attr('y',0)
.attr('width',L)
.attr('height',L)
.attr('class','cell');
}
facet_move(facet, state.init ? null : t);
}
function facet_move(facet, t)
{
(t ? facet.transition(t) : facet)
.attr('opacity',function(d,i) {
var age = state.n - d.n;
return age == 0 ? 0 : 1-age/state.nfacet; })
.attr('transform',function(d,i) { return 'translate(0,'+((d.n-state.n+state.nfacet-1)*L)+')'; });
}
function facet_update(facets, t)
{
facet_move(facets, t);
}
function update_view(state, ticktock)
{
var wheel = d3.select("#wheel");
var facets = wheel.selectAll('g');
if (state.ticktock)
{
var t = d3.transition().duration(300);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd .call(facet_update, t)
.enter()
.call(facet_enter, t)
upd.exit()
.transition(t)
.attr('transform','translate (0,'+(-L)+')')
.remove();
}
else
{
// tock
var t = d3.transition().duration(100);
var t2 = t.transition().duration(100);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd.call(facet_update, t)
.enter()
.call(facet_enter, t);
}
}
var tmr = d3.timer(function(elapsed) {
var do_something = false;
while (elapsed >= state.nexttick)
{
do_something = true;
state.nexttick += state.ticksize;
}
if (do_something && !(d3.select('#pause').property('checked') ))
{
state.ticktock = !state.ticktock;
update_state(state);
update_view(state);
state.init = false;
}
} );
});
</script>
</head>
<body>
<div id='wheel-container' ></div>
<form class="">
<input type="checkbox" id="pause" name="pause">pause</input>
</form>
<div id='ticktock' class='hidden'></div>
</body>
</html>
Looks like floating-point rounding errors strike again. I changed to shape-rendering: crispEdges; and then rounded to an integer translate in one of the root elements and that seems to fix most of it (still a little residual y-axis shift).
was:
var x1 = L*0.5+5;
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
changed to:
var x1 = Math.round(L*0.5+5);
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<style type='text/css'>
.hidden {
display: none;
}
#ticktock {
position: absolute;
top: 550px;
left: 400px;
}
svg rect.cell {
fill: none;
stroke: steelblue;
shape-rendering: crispEdges;
}
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(event) {
var L = 25;
var maxFacetCount = 8;
var state = {
nexttick: 0,
ticksize: 500,
n: -8,
nx: 8,
wheel: [],
nfacet: maxFacetCount,
init: true,
ticktock: true
};
function update_state(state)
{
if (state.ticktock)
{
if (state.wheel.length >= state.nfacet)
state.wheel.shift();
state.wheel.push({n: ++state.n });
}
}
state.wheel = state.wheel.slice(-1);
function prepare_view(state)
{
var width = 60 + (state.nx+0.5)*(L+2);
var height = 5 + (state.nfacet+0.5)*L;
var svg = d3.select("#wheel-container").append("svg")
.attr("width", width)
.attr("height", height);
var x1 = Math.round(L*0.5+5);
var wheel = svg.append('g')
.attr('id','wheel')
.attr('transform','translate('+x1+',0)');
}
prepare_view(state);
function facet_enter(facets, t)
{
var facet = facets.append('g');
for (var i = 0; i < state.nx; ++i)
{
facet.append('rect')
.attr('x',i*L)
.attr('y',0)
.attr('width',L)
.attr('height',L)
.attr('class','cell');
}
facet_move(facet, state.init ? null : t);
}
function facet_move(facet, t)
{
(t ? facet.transition(t) : facet)
.attr('opacity',function(d,i) {
var age = state.n - d.n;
return age == 0 ? 0 : 1-age/state.nfacet; })
.attr('transform',function(d,i) { return 'translate(0,'+((d.n-state.n+state.nfacet-1)*L)+')'; });
}
function facet_update(facets, t)
{
facet_move(facets, t);
}
function update_view(state, ticktock)
{
var wheel = d3.select("#wheel");
var facets = wheel.selectAll('g');
if (state.ticktock)
{
var t = d3.transition().duration(300);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd .call(facet_update, t)
.enter()
.call(facet_enter, t)
upd.exit()
.transition(t)
.attr('transform','translate (0,'+(-L)+')')
.remove();
}
else
{
// tock
var t = d3.transition().duration(100);
var t2 = t.transition().duration(100);
var upd = facets
.data(state.wheel, function(d,i) { return d.n; });
upd.call(facet_update, t)
.enter()
.call(facet_enter, t);
}
}
var tmr = d3.timer(function(elapsed) {
var do_something = false;
while (elapsed >= state.nexttick)
{
do_something = true;
state.nexttick += state.ticksize;
}
if (do_something && !(d3.select('#pause').property('checked') ))
{
state.ticktock = !state.ticktock;
update_state(state);
update_view(state);
state.init = false;
}
} );
});
</script>
</head>
<body>
<div id='wheel-container' ></div>
<form class="">
<input type="checkbox" id="pause" name="pause">pause</input>
</form>
<div id='ticktock' class='hidden'></div>
</body>
</html>
I am having some really weird issues with my static GridView Header. The lines in IE aren't lining up properly; some of them do, and others do not. Can some one help me out? It works perfectly in Chrome, just not IE.
Chrome:
IE:
Here is my relevant code.
<script type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 50) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.left = (tbl.clientLeft-25) +'px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.alignContent = 'center';
//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
//if (document.getElementById('DivHeaderRow').scrollLeft >= 300) {
// document.getElementById('DivHeaderRow').scrollLeft = 300;
//}
}
</script>
CSS
html, body {
margin:0px;
padding:0px;
width: 100%;
box-sizing: border-box;
}
CSS Header Style
.GVFixedHeader
{
font-weight: bold;
background-color: Green;
position: relative;
font-size: 12px;
text-align: left;
}
It has to do with how IE renders a GridView. I would custom change my formating on one cell of the table, but that would mess with IE and change the default settings. Chrome would correctly identify that I only wanted to add style not change completely.
for (int i = 0; i < e.Row.Cells.Count; i++)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: inital;");
e.Row.Cells[i].Attributes.Add("style", "text-align: left;");//THIS IS WHAT I ADDED + some altering of the width of the JS
if (i == 1)
{
e.Row.Cells[i].Text = "Make Inactive?";
}
if (i == 9)
{
e.Row.Cells[i].Text = "Total Invoice YTD";
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
if (i == 13)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
}
if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[i].Attributes.Add("style", "white-space: nowrap;"); } //ALWAYS makes sure there is no wrapping of text
}
I'm working on a game named Factory Tycoon and have spotted a bug which I can't resolve myself. Every second you get plus what your items per second is on your items but it is failing to do so. Feel free to test the code. Code:
<!DOCTYPE html>
<html>
<head>
<title>Factory Tycoon</title>
<script type="text/javascript">
var money = 1000;
var items = 0;
var itemsps = 1;
var dropper1Cost = 100;
var dropper1Audio = new Audio('Audio/dropper1Sound.mp3');
function addDropper() {
if (money <= dropper1Cost - 1) {
alert('Not Enough Money.')
}
if (money >= dropper1Cost) {
dropper1Audio.play()
itemsps += 1;
money -= dropper1Cost;
dropper1Cost += 100;
}
}
setInterval(function renderMoney() {
document.getElementById('money').innerHTML = "Money:" + money;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('items').innerHTML = "Items Processed:" + items;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('itemsps').innerHTML = "Items Processed Per Second:" + itemsps;
}, 1000)
</script>
</head>
<h4 id="money"></h4>
<h4 id="items"></h4>
<h4 id="itemsps"></h4>
<body>
<img src="Images/dropper1IMG.png" onclick="addDropper()">
</html>
There isn't much code as I've only just started to develop it tonight :).
There is a few issues in the code:
<h4> elements need to be inside the <body> element
the </body> end tag is missing
the setInterval is called before all elements had a chance to load, which will make it error, so I wrapped them in an init function and called that on body load
Side note, this code can be optimized with addEventListener for the load event etc., but here you have a start
<!DOCTYPE html>
<html>
<head>
<title>Factory Tycoon</title>
<style>
span { display: inline-block; padding: 5px; background: #ddd; }
</style>
<script type="text/javascript">
var money = 1000;
var items = 0;
var itemsps = 1;
var dropper1Cost = 100;
var dropper1Audio = new Audio('Audio/dropper1Sound.mp3');
function addDropper() {
if (money <= dropper1Cost - 1) {
alert('Not Enough Money.')
}
if (money >= dropper1Cost) {
dropper1Audio.play()
itemsps += 1;
money -= dropper1Cost;
dropper1Cost += 100;
}
}
function init() {
setInterval(function renderMoney() {
document.getElementById('money').innerHTML = "Money:" + money;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('items').innerHTML = "Items Processed:" + items;
})
setInterval(function renderItemsProcessedPS() {
document.getElementById('itemsps').innerHTML = "Items Processed Per Second:" + itemsps;
}, 1000)
}
</script>
</head>
<body onload="init();">
<h4 id="money"></h4>
<h4 id="items"></h4>
<h4 id="itemsps"></h4>
<span onclick="addDropper()">Click Me</span>
</body>
</html>
I'm adapting this progress bar:http://www.richardshepherd.com/tv/audio/ to work with my playlist code, but I can't work out why it's not working. I expect it's something ridiculous (I tried adding the (document).ready function, but that broke the rest of my code).
This is what I have:
function loadPlayer() {
var audioPlayer = new Audio();
audioPlayer.controls="controls";
audioPlayer.preload="auto";
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
document.getElementById("player").appendChild(audioPlayer);
nextSong();
}
function nextSong() {
if(urls[next]!=undefined) {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
audioPlayer.src=urls[next];
audioPlayer.load();
audioPlayer.play();
next++;
} else {
loadPlayer();
}
} else {
alert('the end!');
}
}
function errorFallback() {
nextSong();
}
function playPause() {
var audioPlayer = document.getElementsByTagName('audio')[0];
if(audioPlayer!=undefined) {
if (audioPlayer.paused) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
} else {
loadPlayer();
}
}
function stop() {
var audioPlayer = document.getElementsByTagName('audio')[0];
audioPlayer.pause();
audioPlayer.currentTime = 0;
}
function pickSong(num) {
next = num;
nextSong();
}
var urls = new Array();
urls[0] = '01_horses_mouth/mp3/01. Let The Dog See The Rabbit preface.mp3';
urls[1] = '01_horses_mouth/mp3/02. The Other Horse\'s Tale.mp3';
urls[2] = '01_horses_mouth/mp3/03. Caged Tango.mp3';
urls[3] = '01_horses_mouth/mp3/04. Crumbs.mp3';
urls[4] = '01_horses_mouth/mp3/05. Mood Elevator Reprise.mp3';
urls[5] = '01_horses_mouth/mp3/06. Mood Elevator.mp3';
var next = 0;
// Display our progress bar
audioPlayer.addEventListener('timeupdate', function(){
var length = audioPlayer.duration;
var secs = audioPlayer.currentTime;
var progress = (secs / length) * 100;
$('#progress').css({'width' : progress * 2});
var tcMins = parseInt(secs/60);
var tcSecs = parseInt(secs - (tcMins * 60));
if (tcSecs < 10) { tcSecs = '0' + tcSecs; }
$('#timecode').html(tcMins + ':' + tcSecs);
}, false);
I end up getting the default player which works fine, as do my own play/pause and stop buttons, but the progress bar does nothing.
Oh, and this is what I've stuck in my css:
#progressContainer {position: relative; display: block; height: 20px;
background-color: #fff; width: 200px;
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
margin-top: 5px;}
#progress {
display: block;
height: 20px;
background-color: #99f;
width: 0;
position: absolute;
top: 0;
left: 0;}
and this is the html:
<div id="player" >
<span id="timecode"></span>
<span id="progressContainer">
<span id="timecode"></span>
<span id="progress"></span>
</div>
The page is here: http://lisadearaujo.com/clientaccess/wot-sound/indexiPhone.html
Please note that this is only working with the media query for iPhone portrait orientation, so if you look at it on a desktop, you'll need to squeeze your window up. :-)
I've now gone with a different solution (http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html) which explained how to acheive this a little better for me. I'm a copy/paster so have very little clue about the correct order in which things must go. What I've got now is this:
function loadPlayer() {
var audioPlayer = new Audio();
audioPlayer.controls="controls";
audioPlayer.preload="auto";
audioPlayer.addEventListener('ended',nextSong,false);
audioPlayer.addEventListener('error',errorFallback,true);
audioPlayer.addEventListener('timeupdate',updateProgress, false);
document.getElementById("player").appendChild(audioPlayer);
nextSong();
}
var urls = new Array();
urls[0] = '01_horses_mouth/mp3/01. Let The Dog See The Rabbit preface.mp3';
urls[1] = '01_horses_mouth/mp3/02. The Other Horse\'s Tale.mp3';
urls[2] = '01_horses_mouth/mp3/03. Caged Tango.mp3';
urls[3] = '01_horses_mouth/mp3/04. Crumbs.mp3';
urls[4] = '01_horses_mouth/mp3/05. Mood Elevator Reprise.mp3';
urls[5] = '01_horses_mouth/mp3/06. Mood Elevator.mp3';
var next = 0;
function updateProgress()
{
var audioPlayer = document.getElementsByTagName('audio')[0];
var value = 0;
if (audioPlayer.currentTime > 0) {
value = Math.floor((100 / audioPlayer.duration) * audioPlayer.currentTime);
}
progress.style.width = value + "%";
}
Hurray. It works. I am not entirely sure why, but that's OK for now...