― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:01 (twenty-two years ago)
― caitlin (caitlin), Tuesday, 25 May 2004 09:04 (twenty-two years ago)
― stevem (blueski), Tuesday, 25 May 2004 09:04 (twenty-two years ago)
― Ste (Fuzzy), Tuesday, 25 May 2004 09:05 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:06 (twenty-two years ago)
you can see on the site if you're using a pc i have no line breaks between paragraphs, despite having put the in on the posts. each different review should be divided thus
end of review
full line space
start of new review
you can see this on a mac, but not on a pc.also the default font is bold, i'd rather it be normal so i can use bold when formatting text and the font to be a little lighter. as i say it's all pretty simple, but i r a spazz with this sort of stuff.
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:10 (twenty-two years ago)
is not valid HTML.
― MarkH (MarkH), Tuesday, 25 May 2004 09:14 (twenty-two years ago)
<br /> is not valid HTML.
― MarkH (MarkH), Tuesday, 25 May 2004 09:15 (twenty-two years ago)
― Ste (Fuzzy), Tuesday, 25 May 2004 09:24 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:24 (twenty-two years ago)
it is. the space and slash is there so that it's also valid xhtml. (whereas your standard p's are being phased out and should be replaced with matching p and close p blocks)
(sorry if that doesn't make sense, i couldn't be bothered escaping the triangle brackets)
― koogs (koogs), Tuesday, 25 May 2004 09:24 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:27 (twenty-two years ago)
― Ste (Fuzzy), Tuesday, 25 May 2004 09:34 (twenty-two years ago)
― Ste (Fuzzy), Tuesday, 25 May 2004 09:36 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:37 (twenty-two years ago)
try to stick to 00, 33, 66, 99, cc, ff for the pairs (so-called 'web safe' palette). try #cccc99
remove font-weight:boldchange the typeface with font-family:whatever
― koogs (koogs), Tuesday, 25 May 2004 09:37 (twenty-two years ago)
― Ste (Fuzzy), Tuesday, 25 May 2004 09:38 (twenty-two years ago)
― stevem (blueski), Tuesday, 25 May 2004 09:39 (twenty-two years ago)
{BACKGROUND: url(http://animatrix.free.fr/arm/armour.jpg) #201f1a; WORD-SPACING: 2px; COLOR: #CCBB88; FONT-FAMILY: new-roman;LETTER-SPACING: 0px}
(yes i meant px not pts)
― Ste (Fuzzy), Tuesday, 25 May 2004 09:40 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:41 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:49 (twenty-two years ago)
PC survey of fonts: http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtmlMac likewise: http://www.codestyle.org/css/font-family/sampler-MacResults.shtml
― Jaunty Alan (Alan), Tuesday, 25 May 2004 09:55 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 09:56 (twenty-two years ago)
― stevem (blueski), Tuesday, 25 May 2004 09:57 (twenty-two years ago)
#Title { PADDING-LEFT: 0px; FONT-SIZE: 43px;font-weight:bold; PADDING-TOP: 10px
.Post { PADDING-RIGHT: 15px; FONT-SIZE: 17px; MARGIN-BOTTOM: 20px; LINE-HEIGHT: 22px; TEXT-ALIGN: justify}
Do you mean make the date bold and lighter in colour, as I can barely see it now.
― Ste (Fuzzy), Tuesday, 25 May 2004 09:57 (twenty-two years ago)
I think if you use px rather than pt in your font sizings, the client cannot resize the text.
― Jaunty Alan (Alan), Tuesday, 25 May 2004 09:59 (twenty-two years ago)
ah, I always wondered about that. That makes sense.
― Ste (Fuzzy), Tuesday, 25 May 2004 10:01 (twenty-two years ago)
http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm
― Jaunty Alan (Alan), Tuesday, 25 May 2004 10:04 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 10:06 (twenty-two years ago)
.DateHeader { MARGIN-TOP: 30px; FONT-SIZE: 18px;font-weight:bold; MARGIN-BOTTOM: 0px; WIDTH: 300px; COLOR: #ddcc99; BORDER-BOTTOM: #837f67 1px solid;
TEXT-ALIGN: left}
to make the date readable now, or is that too light?
― Ste (Fuzzy), Tuesday, 25 May 2004 10:07 (twenty-two years ago)
― Jaunty Alan (Alan), Tuesday, 25 May 2004 10:09 (twenty-two years ago)
(xpost yeah, change that letter spacing to 0px)
― Ste (Fuzzy), Tuesday, 25 May 2004 10:10 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 10:30 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 10:31 (twenty-two years ago)
― Jaunty Alan (Alan), Tuesday, 25 May 2004 10:42 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 10:52 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 10:55 (twenty-two years ago)
91% on macs, but I *AM* an awkward bastard - Courier New is a TrueType face. Courier is one of the magic core of PostSript fonts so it's preferable to have that instead. As I work in print it's safer/better to leave out anything TrueType with similar names to widely available PS fonts in case of unintended substitution.
― Jaunty Alan (Alan), Tuesday, 25 May 2004 11:14 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 11:26 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 25 May 2004 11:50 (twenty-two years ago)
― Ste (Fuzzy), Tuesday, 25 May 2004 11:58 (twenty-two years ago)
― Dave Stelfox (Dave Stelfox), Tuesday, 8 June 2004 11:53 (twenty-one years ago)
http://www.w3schools.com/tags/tag_body.asp
― koogs (koogs), Tuesday, 8 June 2004 13:13 (twenty-one years ago)
― Ste (Fuzzy), Tuesday, 8 June 2004 13:24 (twenty-one years ago)
http://xchg.assembler.org/index.html for instance (drag the info box over the blocks. blocks are also draggable btw). um, doesn't work in mozilla.
png files also allow alpha levels - can be semi transparent but support on certain browsers (*cough*IE*cough*) is broken.
― koogs (koogs), Tuesday, 8 June 2004 13:37 (twenty-one years ago)
― JaXoN (JasonD), Tuesday, 8 June 2004 21:36 (twenty-one years ago)
body{font-family:courier new;background:#201F1A url('http://animatrix.free.fr/arm/armour.jpg');color:#CCBB99; letter-spacing:0px;word-spacing:-1px}
so just remove the url('...') and then play with the colours.
― koogs (koogs), Wednesday, 9 June 2004 06:32 (twenty-one years ago)
― Ste (Fuzzy), Monday, 20 June 2005 13:34 (twenty years ago)
― koogs (koogs), Monday, 20 June 2005 13:53 (twenty years ago)
<html> <head> <head> <body> <script> var images = new Array(3); images[0] = "flowers.png"; images[1] = "babies.png"; images[2] = "kittens.png"; document.write('<img src="' + images[Math.floor(Math.random() * 3)] + '"/>'); <script> <body><html>
― koogs (koogs), Monday, 20 June 2005 14:04 (twenty years ago)
― koogs (koogs), Monday, 20 June 2005 14:06 (twenty years ago)
― Ste (Fuzzy), Monday, 20 June 2005 14:09 (twenty years ago)
― k/l (Ken L), Monday, 27 June 2005 16:09 (twenty years ago)
― Tech Support Droid (ForestPines), Monday, 27 June 2005 16:12 (twenty years ago)
― Sociah T Azzahole (blueski), Monday, 27 June 2005 16:13 (twenty years ago)
― k/l (Ken L), Monday, 27 June 2005 16:38 (twenty years ago)
a lot of people these days run with javascript turned off so i'd avoid solutions that relied on javascript and maybe put a button next to the ddlb that people have to click on to activate their selection. this'd automatically remove focus from the SELECT.
(that said, changing focus on item selection isn't difficult, it's the onSelect event, just set it to document.whatever.focus() where 'whatever' is the main body, possibly 'parent' will do (sorry, don't have the time to mess with it myself))
― koogs (koogs), Tuesday, 28 June 2005 07:59 (twenty years ago)
Really? what's brought this on then?
― Ste (Fuzzy), Tuesday, 28 June 2005 08:30 (twenty years ago)
anyway, this works in ie and mozilla (using minimal javascript) (i don't think mozilla has the same focus problem actually but...)
<html> <body> <form> <select onchange="javascript:parent.focus()"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> <option value="5">five</option> <option value="6">six</option> </select> </form> </body></html>
― koogs (koogs), Tuesday, 28 June 2005 08:48 (twenty years ago)
hi, so i want to create a website that does something. i'm guessing that it would be fairly simple to code, and i pondered asking a kind ILXor if they would mind coding it for me, while i provide them with the content, and then they could do it in an afternoon or two and we could share credit as we rake in millions of dollars of profit. but then i thought it might be a nice opportunity to teach myself some basic things. before i get started on researching wtf i'm supposed to do, i was hoping someone here might be able to push me in the right general direction.
(apologies in advance - i am terrible at this shit)
i would like to create a website that:
1) plays (mostly) randomly selected audio files of people speaking a sentence. i would have a pool of about 200 audio clips, and then as soon as you land on the website, it starts randomly selecting them and playing them.3) i would like for 2 of the audio clips to be played more often than the others. for example, i'd like one of them to play about every 2 minutes or so, or in a range between 1.5 to 3 minutes, and another to trigger every 5 minutes or so. 2) i would like the background image to change every time a new audio clip is triggered.
that's it. i think most of this is pretty simple stuff, but i don't even know where to start. can someone think of a good resource that i use, or even just confirm my naive instinct that this is something i can do simply in HTML/CSS?
― Karl Malone, Monday, 9 December 2013 19:28 (twelve years ago)
do i need to use PHP? from a googled forum where a 13-year-old is asking how to play randomly selected audio files, i found this reply:
When you're picking a host, make sure they support PHP. It's really only a few lines of code to select a random file from a given folder. You can use the glob function to return a list of all of the files in a directory:http://www.php.net/manual/en/function.glob.phpThe array_rand function will get a random item from an array:http://www.php.net/manual/en/function.array-rand.phpe.g.:<?php $files = glob('music/*.m4a'); // get all .m4a files in the music directory$fname = $files[array_rand($files)]; // get a random filenameecho $fname; ?>
http://www.php.net/manual/en/function.glob.php
The array_rand function will get a random item from an array:
http://www.php.net/manual/en/function.array-rand.php
e.g.:
<?php $files = glob('music/*.m4a'); // get all .m4a files in the music directory$fname = $files[array_rand($files)]; // get a random filenameecho $fname; ?>
is this on the right track?
― Karl Malone, Monday, 9 December 2013 19:32 (twelve years ago)
You could conceivably do this without a dynamic server side language like php. You will need to use javascript anyway to change the fsou d clips and as long as you know all the filenames you can put them all in an array and randomly select them when required.
― Chewshabadoo, Monday, 9 December 2013 19:45 (twelve years ago)
er, change the 'sound' clips. That would be my iPad deciding it knows best.
― Chewshabadoo, Monday, 9 December 2013 22:01 (twelve years ago)
HTML/CSS won't be enough, because they mostly can't make decisions, under which random selection of whatever falls.
― Matt Groening's Cousin (Leee), Monday, 9 December 2013 22:09 (twelve years ago)
Here’s some stuff on Stack Overflow for example: http://stackoverflow.com/questions/20227266/play-random-sounds-without-repeat
― Chewshabadoo, Monday, 9 December 2013 22:19 (twelve years ago)
thanks! yeah, from my perusing it looks like javascript should do the trick.
both of these seem relevant:
http://stackoverflow.com/questions/11039984/how-can-i-play-a-random-sound-on-click-in-a-web-pagehttp://forums.asp.net/t/1876176.aspx
what i want is for the soundclips to play in random order, nonstop, without waiting for a click. but i'm guessing there's some readymade javascript that i can just copy and paste from somewhere that'll help with that. but it would be cool to let people skip to the next soundclip by clicking. clicking would trigger the next randomly selected sound clip (which would play over the top of the previous soundclip) and a new image in the background.
― Karl Malone, Monday, 9 December 2013 22:20 (twelve years ago)
xpost, whoa, looks like i was headed in the right direction on stackoverflow, but you found a much better link. Thanks!
Forked the fiddle on that page for autoplaying, and changing an element using modified code.
http://jsfiddle.net/NrykE/2/
― Chewshabadoo, Monday, 9 December 2013 22:50 (twelve years ago)
wow, nice!! that's kind of mesmerizing already! i can't think you for that part alone, already. that would have taken me 4 and a half years to accomplish, no joke.
currently you have the background changing just by switching colors - how would i go about switching images instead? would it be as easy as this:
var colours = [];function getColours() { return [ '/picture1.gif', '/picture2.gif', '/picture3.gif', '/picture4.gif', '/picture5.gif' ].sort(function () { return (.5 - Math.random()); });}function changeColour() { if (!colours.length) { colours = getColours(); } $("#element").css('background', colours.pop());
var colours = [];
function getColours() { return [ '/picture1.gif', '/picture2.gif', '/picture3.gif', '/picture4.gif', '/picture5.gif' ].sort(function () { return (.5 - Math.random()); });}
function changeColour() { if (!colours.length) { colours = getColours(); }
$("#element").css('background', colours.pop());
― Karl Malone, Monday, 9 December 2013 23:35 (twelve years ago)
It'd be the exact same, you'd just change the name of the function getColours and changeColour to something that more aptly describes their intentions. Also, the part that lists the gifs, you would change that so as to refer to where your images are.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 00:07 (twelve years ago)
OK, not *exact* same since you have different randomization specs, but that'd be the vanilla version.
cool! thanks so much for the help, both of you, and i may or may not be back later with another in my series of uninformed questions!
― Karl Malone, Tuesday, 10 December 2013 00:12 (twelve years ago)
'background-image' instead of 'background' in the last line iirc
― Scuse me while I kiss this guy correspondent (ledge), Tuesday, 10 December 2013 00:18 (twelve years ago)
Also, you may need an extra } at the end (don't know if it's missing because the C+P didn't get it) to match
function changeColour() {
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 00:23 (twelve years ago)
oh and css syntax for images is trickier
$("#element").css('background-image', "url('" + colours.pop() + "')");
untested, knew it was a bad idea to start offering tech support past my bedtime.
― Scuse me while I kiss this guy correspondent (ledge), Tuesday, 10 December 2013 00:25 (twelve years ago)
i have really, really basic questions about the interplay between html, css and js, but i'm going to stop abusing your generosity and keep on trying to figure it out. thanks so much!
― Karl Malone, Tuesday, 10 December 2013 01:15 (twelve years ago)
I'd be perfectly happy to answer! Improve my ILX karma, at the least.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 01:37 (twelve years ago)
well....ok, you asked for it! again, sorry for my ignorance here as i'm learning on the fly.
first of all, i'm starting with chewshabadoo's example code, which demonstrably works: http://jsfiddle.net/NrykE/2/
i'm trying to recreate that working code in dreamweaver, before i begin to make any modifications. in dreamweaver, i have three documents setup that (hopefully) reference each other. one for html (index.html), another for the css (box.css), another for the javascript (java.js). yes, i realize these are ridiculous filenames but let's just continue...
here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";><html xmlns="http://www.w3.org/1999/xhtml";><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Conference Call</title> <script type="text/javascript" src="java.js"></script><style type="text/css"> @import url("box.css"); </style> </head><body><div id="element"></div></body></html>
<script type="text/javascript" src="java.js"></script>
<style type="text/css"> @import url("box.css"); </style> </head>
<body>
<div id="element"></div></body></html>
here's the css:
@charset "UTF-8";/* CSS Document */#element { height: 200px; width: 200px;}
#element { height: 200px; width: 200px;}
and here's the javascript:
// JavaScript Documentvar sounds = [];// Return the full list of URLs in random orderfunction getSounds() { return [ // so tinny... 'http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169196_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169203_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169202_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169201_1587259-lq.mp3' ].sort(function () { // http://stackoverflow.com/a/18650169/283078 return (.5 - Math.random()); });}// Play the next soundfunction playSound() { if (!sounds.length) { // Get the list of sounds (random order) sounds = getSounds(); } // Pops a URL every time, ensuring all are played exactly once $("#element").html( '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />' ); // Once all the URLs have been popped, the array is repopulated}var colours = [];function getColours() { return [ 'red', 'yellow', 'green', 'purple', 'orange' ].sort(function () { return (.5 - Math.random()); });}function changeColour() { if (!colours.length) { colours = getColours(); } $("#element").css('background', colours.pop());}function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 3000); //change number for delay between sounds}loop();
var sounds = [];
// Return the full list of URLs in random orderfunction getSounds() { return [ // so tinny... 'http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169196_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169203_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169202_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169201_1587259-lq.mp3' ].sort(function () { // http://stackoverflow.com/a/18650169/283078 return (.5 - Math.random()); });}
// Play the next soundfunction playSound() { if (!sounds.length) { // Get the list of sounds (random order) sounds = getSounds(); }
// Pops a URL every time, ensuring all are played exactly once $("#element").html( '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />' );
// Once all the URLs have been popped, the array is repopulated
}
function getColours() { return [ 'red', 'yellow', 'green', 'purple', 'orange' ].sort(function () { return (.5 - Math.random()); });}
function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 3000); //change number for delay between sounds}
loop();
when i enter all of this into dreamweaver, it's recognizing the css in the html, but not the javascript. i've...never used dreamweaver, so it's possible i'm just forgetting to do something that's really basic. but is there something in the code that looks off?
― Karl Malone, Tuesday, 10 December 2013 01:51 (twelve years ago)
Without digging too much into the JS, you might want to put in a simple alert to make sure that Dreamweaver is seeing the JS file correctly. Where you have loop();, I'd do something like this:
alert("If you see this popup, then the JS is loaded");loop();
Suffice it to say, I've never used DW.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:01 (twelve years ago)
yeah, i just added that, and still nothing. it's just not picking up the JS for some reason.
if it helps, here's a screenshot of what i'm seeing in dreamweaver: http://i.imgur.com/nu7oAKz.jpg
― Karl Malone, Tuesday, 10 December 2013 02:02 (twelve years ago)
What you could do (unless you want to reuse the JS for multiple HTML pages) is to copy/paste all the code in the javascript file into the HTML document, putting it inside script tags like so:
<script type='text/javascript'>...</script>
Include the alert line as well to double check that DW is registering it, and if so, delete it. If not, there might be a setting in DW that's disabling javascript when you preview the page.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:12 (twelve years ago)
Oh, pretty much all of the javascript code you copied would replace the ellipses in my code snippet in the previous post.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:13 (twelve years ago)
hmm, i guess it's the latter suggestion (DW disabling javascript in preview) because it's still not showing up. i'll do some looking around in preferences.
― Karl Malone, Tuesday, 10 December 2013 02:17 (twelve years ago)
wait - i had to click "live" mode! the random soundclip/color still aren't working, but at least it displayed the alert you suggested inserting. that's a start. :)
― Karl Malone, Tuesday, 10 December 2013 02:20 (twelve years ago)
hmm. so here's the current version, which displays the pop-up alert, but nothing else:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";><html xmlns="http://www.w3.org/1999/xhtml";><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Conference Call</title><script type="text/javascript">// JavaScript Documentvar sounds = [];// Return the full list of URLs in random orderfunction getSounds() { return [ // so tinny... 'http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169196_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169203_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169202_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169201_1587259-lq.mp3' ].sort(function () { // http://stackoverflow.com/a/18650169/283078 return (.5 - Math.random()); });}// Play the next soundfunction playSound() { if (!sounds.length) { // Get the list of sounds (random order) sounds = getSounds(); } // Pops a URL every time, ensuring all are played exactly once $("#element").html( '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />' ); // Once all the URLs have been popped, the array is repopulated}var colours = [];function getColours() { return [ 'red', 'yellow', 'green', 'purple', 'orange' ].sort(function () { return (.5 - Math.random()); });}function changeColour() { if (!colours.length) { colours = getColours(); } $("#element").css('background', colours.pop());}function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 3000); //change number for delay between sounds}alert("If you see this popup, then the JS is loaded");loop(); </script><style type="text/css"> @import url("box.css"); </style> </head><body><div id="element"></div></body></html>
<script type="text/javascript">
// JavaScript Document
</script>
and here's the referenced css, which seems to be working fine:
@charset "UTF-8";/* CSS Document */#element { height: 400px; width: 200px;
#element { height: 400px; width: 200px;
― Karl Malone, Tuesday, 10 December 2013 02:24 (twelve years ago)
Oh, you need to include the jQuery library as well (which is javascript with dollar signs). In your HTML, somewhere in between the head tags, add this line:
<script src="jquery-1.10.2.min.js"></script>
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:27 (twelve years ago)
Wait sorry, that link won't work, give me a sec...
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:28 (twelve years ago)
i tried this one instead, and it worked: http://code.jquery.com/jquery-git.js
but yes, thanks!i swear, i tried to due some due diligence and look up "javascript for total fools", but i didn't catch the part about including the jQuery library. thanks!!
― Karl Malone, Tuesday, 10 December 2013 02:31 (twelve years ago)
Use this one:
<script src="http://code.jquery.com/jquery-1.10.2.min.js";>
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:32 (twelve years ago)
Your link will do fine, and don't worry, JQ isn't Javascript 101 (it's usually taught after someone already has some familiarity with JS, I think).
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 02:35 (twelve years ago)
Anyway, glad it's working now, and happy to help!
You should use Google’s CDN instead of JQuery’s since it’s more likely people have it cached:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";></script>
― Allen (etaeoe), Tuesday, 10 December 2013 16:06 (twelve years ago)
I cleaned it up:
<!DOCTYPE html> <head> <title>Conference Call</title> <style> #element { height: 400px; width: 200px; } </style> </head> <body> <div id="element"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";;> </script> <script> var sounds = []; // Return the full list of URLs in random order function getSounds() { return [ // so tinny... 'http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169196_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169203_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169202_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169201_1587259-lq.mp3' ].sort(function () { // http://stackoverflow.com/a/18650169/283078 return (.5 - Math.random()); }); } // Play the next sound function playSound() { if (!sounds.length) { // Get the list of sounds (random order) sounds = getSounds(); } // Pops a URL every time, ensuring all are played exactly once $("#element").html( '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />' ); // Once all the URLs have been popped, the array is repopulated } var colours = []; function getColours() { return [ 'red', 'yellow', 'green', 'purple', 'orange' ].sort(function () { return (.5 - Math.random()); }); } function changeColour() { if (!colours.length) { colours = getColours(); } $("#element").css('background', colours.pop()); } function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 3000); //change number for delay between sounds } loop(); </script> </body></html>
<style> #element { height: 400px; width: 200px; } </style> </head>
<body> <div id="element">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";;> </script>
<script> var sounds = [];
// Return the full list of URLs in random order function getSounds() { return [ // so tinny... 'http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169196_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169203_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169202_1587259-lq.mp3', 'http://www.freesound.org/data/previews/169/169201_1587259-lq.mp3' ].sort(function () { // http://stackoverflow.com/a/18650169/283078 return (.5 - Math.random()); }); }
// Play the next sound function playSound() { if (!sounds.length) { // Get the list of sounds (random order) sounds = getSounds(); }
function getColours() { return [ 'red', 'yellow', 'green', 'purple', 'orange' ].sort(function () { return (.5 - Math.random()); }); }
$("#element").css('background', colours.pop()); }
function loop() {
playSound(); changeColour();
setTimeout(function() { loop() }, 3000); //change number for delay between sounds }
loop(); </script> </body></html>
― Allen (etaeoe), Tuesday, 10 December 2013 16:15 (twelve years ago)
I’d also recommend using HTML 5’s Audio element rather than the Embed element because it doesn’t require an external dependency (e.g. QuickTime):
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
― Allen (etaeoe), Tuesday, 10 December 2013 16:17 (twelve years ago)
oooh, that's great, thanks! i was afraid to ask about the quicktime thing, but it was kind of bothering me that a quicktime dialog box was popping up whenever i tested out the code (in chrome at least - not in safari)
― Karl Malone, Tuesday, 10 December 2013 16:29 (twelve years ago)
No problem. I refactored your code to remove JQuery and remove some duplication (e.g. a discrete `randomize` function instead of doing the sampling in the `playSound` and `changeColour` functions):
<!DOCTYPE html> <head> <title>Conference Call</title> <style> #element { height: 400px; width: 200px; } </style> </head> <body> <div id="element"> </div> <script> var colours = randomize(['red', 'yellow', 'green', 'purple', 'orange']); var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = randomize(identifiers.map(URI)); function randomize(collection) { return collection.sort(function() { return (.5 - Math.random()); }); } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function playSound() { var sound = '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />'; document.getElementById('element').innerHTML = sound; } function changeColour() { document.getElementById('element').style.background = colours.pop(); } function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 3000); //change number for delay between sounds } loop(); </script> </body></html>
<script> var colours = randomize(['red', 'yellow', 'green', 'purple', 'orange']); var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = randomize(identifiers.map(URI));
function randomize(collection) { return collection.sort(function() { return (.5 - Math.random()); }); }
function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; }
function playSound() { var sound = '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />';
document.getElementById('element').innerHTML = sound; }
function changeColour() { document.getElementById('element').style.background = colours.pop(); }
function loop() { playSound(); changeColour();
― Allen (etaeoe), Tuesday, 10 December 2013 16:49 (twelve years ago)
I replaced `randomize` with a proper shuffle function:
<script> var colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = shuffle(identifiers.map(URI)); function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function playSound() { var sound = '<embed src="' + sounds.pop() + '" hidden="true" autostart="true" />'; document.getElementById('element').innerHTML = sound; } function changeColour() { document.getElementById('element').style.background = colours.pop(); } function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 3000); //change number for delay between sounds } loop(); </script>
function shuffle(collection) { var counter = collection.length, temporary, index;
while (counter--) { index = (Math.random() * counter) | 0;
temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; }
return collection; }
loop(); </script>
― Allen (etaeoe), Tuesday, 10 December 2013 17:06 (twelve years ago)
i've feel like a dunce asking this when 1) you all are so proficient at this and i'm just barely holding on, and 2) you've done so much already to help, but:
Rather than just changing colors, i want to have a rotating series of images (these will be small gifs that will be blown up to the size of the screen). would i go about doing this similar to how you did the shuffling of the colors? that is, create something like
var ColorIdentifier = ['firstimage', 'secondimage', 'thirdimage', 'fourthimage', 'fifthimage'];var colors = shuffle(ColorIdentifier.map(URI));
function URI(ColorIdentifier) { return '/' + ColorIdentifier + '.gif'; }
is that the right idea?
and if so, how would i define a changeImage function beneath that to actually get it to work?
― Karl Malone, Tuesday, 10 December 2013 17:24 (twelve years ago)
Pretty much the right idea, though you should change the name of this URI function that will give you the right URL for the images so that you can still use the one Allen wrote for the sound files, maybe imageURI() or something.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 17:45 (twelve years ago)
Also, if this is all new to you, you're doing a lot better than some of us did when we were learning (e.g. me).
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 17:50 (twelve years ago)
hmmm, i'm still trying to get the last cleaned up bit of code he posted to work. i'm sure it's correct, but does it matter that there are different variables for "sound" and "sounds" and "colour" and "colours"?
― Karl Malone, Tuesday, 10 December 2013 17:53 (twelve years ago)
ok - i dumped everything into a single index.html, and that fixed it. i keep trying to keep the java and css files separate, but then i keep running into unexpected errors.
so now i'm running allen's most recent streamlined version that he posted...but now the quicktime pop up message is back: "QuickTime Player Needs Your Permission to Run".
― Karl Malone, Tuesday, 10 December 2013 18:01 (twelve years ago)
oh wait, that's because i need to consult the HTML5 <audio> link that he provided and work it in.
― Karl Malone, Tuesday, 10 December 2013 18:02 (twelve years ago)
ok! that was relatively easy. i just changed the embed section to:
function playSound() { var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" />';
now it doesn't require quicktime permission. by bits and pieces it's coming together!
― Karl Malone, Tuesday, 10 December 2013 18:04 (twelve years ago)
Going back to your earlier question, I don't see the var colour, but with "sound" vs. "sounds," you have two distinct variables (the javascript interpreter/your browser doesn't care that the variable names are so similar, it's purely to make things more obvious for human coders), and in this case, these two variables are of different *types*. Without getting too nitty gritty, one of them is just a string of text, the other is a special type of variable (i.e. an "array" or a "list") to which you can perform all kinds of special functions, and which can contain multiple other variables. In this case,
sounds
sound
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 18:12 (twelve years ago)
thanks Leee, that helps. more questions (it'll all be worth it when we're making billions of spacebucks off of this thing):
1) in an earlier version of the code (before allen's helpful cleanup), the randomized audio was working as i want it to - it would play each of the audio clips in a random order, then repopulate the array and start over again. in other words, endless audio. when i made the switch to <audio> rather than <embed>, it seems to have messed up that functionality. now, it plays through all of the clips in the array only once, and then stops. is there something i did wrong? here's the relevant code, i think:
...
setTimeout(function() { loop() }, 2000); //change number for delay between sounds }
― Karl Malone, Tuesday, 10 December 2013 18:22 (twelve years ago)
Nice work!
A few more fixes:
<!DOCTYPE html> <head> <title>Conference Call</title> <style> #element { height: 400px; width: 200px; } </style> </head> <body> <div id="element"> </div> <script> var colours = [] var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function playSound() { if (!sounds.length) { sounds = shuffle(identifiers.map(URI)); } var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" />'; document.getElementById('element').innerHTML = sound; } function changeColour() { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } document.getElementById('element').style.background = colours.pop(); } function loop() { playSound(); changeColour(); setTimeout(function() { loop() }, 1000); //change number for delay between sounds } loop(); </script> </body></html>
<script> var colours = [] var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = [];
function playSound() { if (!sounds.length) { sounds = shuffle(identifiers.map(URI)); }
var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" />';
function changeColour() { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); }
document.getElementById('element').style.background = colours.pop(); }
setTimeout(function() { loop() }, 1000); //change number for delay between sounds }
― Allen (etaeoe), Tuesday, 10 December 2013 18:23 (twelve years ago)
I fixed that in my previous message! My bad!
― Allen (etaeoe), Tuesday, 10 December 2013 18:24 (twelve years ago)
allen, trust me, on this thread you all are not making the bads. **I** make the bads on this thread!
and your fix worked! ok. i have another question, but first let me just post what i have right now, because i changed a few small things (the css and the names/locations of the audio files):
<!DOCTYPE html> <head> <title>Conference Call</title> <!--CSS to make images fullscreen--> <style> #element { position: fixed; top: 0; left: 0; /* Preserve aspect ratio */ min-width: 100%; min-height: 100%; } </style> </head>
<script> var colours = [] var identifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = [];
function URI(identifier) { return 'audio/' + identifier + '.mp3'; }
setTimeout(function() { loop() }, 500); //change number for delay between sounds }
― Karl Malone, Tuesday, 10 December 2013 18:34 (twelve years ago)
shoot, forgot to add the code tags. anyway. my next question:
currently, the audio clips are evenly spaced out (at 500 ms), and they cut each other off if 500 ms has elapsed and the previous clip isn't finished playing yet. what i'd like to do is have each audio clip play in full - some will be as short as 3 seconds, some may be as long as 10-15 seconds - and then cycle onto the next randomly selected clip. is that something that's easy to do?
― Karl Malone, Tuesday, 10 December 2013 18:35 (twelve years ago)
Hrm, I don’t know. But I’m the sure the three of us can figure it out.
Just to clarify, you essentially want to create a shuffled playlist?
― Allen (etaeoe), Tuesday, 10 December 2013 18:44 (twelve years ago)
Here's the relevant JavaScript API for the Audio element:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
― Allen (etaeoe), Tuesday, 10 December 2013 18:47 (twelve years ago)
xpost as a starting point, that's right.
if i can get this working, then there are a few things i'd ideally like to alter for the final version. first, before the shuffling begins, i'd like for an audio clip that i specify to play. it would say something like "ok, let's get this meeting started", and then it would shift into the truly randomized clips. secondly, i think it would be neat to play a looping audio clip in the background, that you can subtly hear as background noise behind the other audio clips.
― Karl Malone, Tuesday, 10 December 2013 18:52 (twelve years ago)
but all of that is just kind of icing on the cake - if i can just get the randomized audio to work i'll be pretty happy!
― Karl Malone, Tuesday, 10 December 2013 18:53 (twelve years ago)
Liking that this is moving forward, can't wait to see the finished result. There will probably be an event handler triggered when the sounds finish, I will take a look.
X-post, here is an example
<audio src="xpto.mp3" onended="DoSomething();"></audio>
Put your function in instead of DoSomething
― Chewshabadoo, Tuesday, 10 December 2013 18:53 (twelve years ago)
Have you discovered Chrome Inspector? If so, try:
var x = document.getElementsByTagName('audio')[0];x.ended;
x.ended;
― Allen (etaeoe), Tuesday, 10 December 2013 18:55 (twelve years ago)
xpost
so "ended" is a property, and it "Indicates whether the media element has ended playback."
does that mean that it would be possible to include that in the looping section near the end of the code to ensure that the audio has ended before it moves on to the next cycle?
― Karl Malone, Tuesday, 10 December 2013 18:56 (twelve years ago)
I saw up thread you were using Dreamweaver. Possibly the best advice I can give you is to ignore Dreamweaver, get a good text editor like SublimeText or Coda, and use in-browser development tools. All browsers have them built in. My preference is Firefox's, but lots of people love Chrome's.
― Chewshabadoo, Tuesday, 10 December 2013 18:59 (twelve years ago)
You should be able to remove the whole SetTimeout section, unless you want to specify a delay between sounds.
Sure, rather than iterating every t (e.g. 1,000 milliseconds), we’ll iterate over the shuffled array. We’ll use a conditional, e.g. if (sound.ended) … to control flow.
― Allen (etaeoe), Tuesday, 10 December 2013 19:00 (twelve years ago)
Also: Iteration is a major challenge when learning to program, so if you’re confused, ask questions!
― Allen (etaeoe), Tuesday, 10 December 2013 19:02 (twelve years ago)
var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" onended="loop()"/>
And remove the SetTimeout line
― Chewshabadoo, Tuesday, 10 December 2013 19:02 (twelve years ago)
Conditional a good idea though.
― Chewshabadoo, Tuesday, 10 December 2013 19:03 (twelve years ago)
that's interesting...when i removed the SetTimeout section, it results in only one audioclip being played, then nothing. here's the section i removed:
setTimeout(function() { loop() }, 500); //change number for delay between sounds
― Karl Malone, Tuesday, 10 December 2013 19:03 (twelve years ago)
Which browser and version are you using?
― Chewshabadoo, Tuesday, 10 December 2013 19:06 (twelve years ago)
If we're using the ended event to fire the next sound, do we still need a loop? We just need to keep track of what's been played.
PS Chews, the event is ended, not onended.
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 19:08 (twelve years ago)
i tested it in both chrome and safari. most likely i just messed up the code somehow. here's the whole thing again, with the setTimeout function removed and the onended="loop()" added in:
<!DOCTYPE html> <head> <title>Conference Call</title> <!--CSS to make images fullscreen--> <style> #element { position: fixed; top: 0; left: 0; /* Preserve aspect ratio */ min-width: 100%; min-height: 100%; } </style> </head> <body> <div id="element"> </div> <script> var colours = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; } function playSound() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); } var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" onended="loop()"/>'; document.getElementById('element').innerHTML = sound; } function changeColour() { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } document.getElementById('element').style.background = colours.pop(); } function loop() { playSound(); changeColour(); } loop(); </script> </body></html>
<script> var colours = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = [];
function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; }
function playSound() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); }
var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" onended="loop()"/>';
function loop() { playSound(); changeColour(); }
― Karl Malone, Tuesday, 10 December 2013 19:08 (twelve years ago)
Ah, sorry on an ipad so not testing and just copied something on Stack Overflow.
― Chewshabadoo, Tuesday, 10 December 2013 19:10 (twelve years ago)
Thinking something like:
function playNextSound() { if (sounds.length == 0) { return; } changeColours(); var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" ended="playNextSound()"/>'; document.getElementById('element').innerHTML = sound;}
And we can dispense with loop().
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 19:12 (twelve years ago)
Curiouser, both on ended and ended are not listed on MDN where. I just looked, even though the SO answer had a load of up votes, ignore that and go down the JavaScript root instead.
― Chewshabadoo, Tuesday, 10 December 2013 19:13 (twelve years ago)
if we dispense with loop(), will it still know to switch out the image?
― Karl Malone, Tuesday, 10 December 2013 19:13 (twelve years ago)
fwiw dreamweaver accepted both ended and onend, so maybe they both work.
either way, though, for some reason it's still just playing a single audio clip and stopping.
― Karl Malone, Tuesday, 10 December 2013 19:14 (twelve years ago)
Actually, the way it is should work, pls ignore my last suggestions!
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 19:19 (twelve years ago)
OK, on my laptop now, lets take a look.
― Chewshabadoo, Tuesday, 10 December 2013 19:26 (twelve years ago)
i added the setTimeout function back in, just to get it back to the point where it plays things continuously instead of stopping after a single iteration.
i made the change that allen suggested earlier:
var sound = '<audio src="' + sounds.pop() + '" hidden="true" autoplay="true" ended="loop()"/>';
to be honest, i don't understand why this doesn't solve the problem of the audio clips being cut off before they're over. shouldn't the ended="loop()" part mean that it must wait until the clip has ended before moving on to the loop function? but instead, it still cuts off the clip early and moves on to the next cycle.
― Karl Malone, Tuesday, 10 December 2013 19:27 (twelve years ago)
oops, that was chews' suggested change, not allen. i'm losing track of all the nice help i'm getting here
― Karl Malone, Tuesday, 10 December 2013 19:38 (twelve years ago)
Try this new definition of loop:
function loop() { changeColour(); playSound(); if (sounds.length) { loop(); }}
if (sounds.length) { loop(); }}
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 19:46 (twelve years ago)
it works for a single audio clip, and then it stops. (i took out the setTimeout bit)
― Karl Malone, Tuesday, 10 December 2013 19:49 (twelve years ago)
All my fiddling is telling me is that <audio> support is very variable between browsers!
― Chewshabadoo, Tuesday, 10 December 2013 19:50 (twelve years ago)
ruh roh! heh. on http://www.w3schools.com/tags/tag_audio.asp , it claims that it should work with Chrome, Safari, IE9, and Firefox (running Firefox 21 on Windows 7, Windows 8, Windows Vista)
― Karl Malone, Tuesday, 10 December 2013 19:54 (twelve years ago)
I wouldn’t trust W3schools that much. Yes, there is <audio> support, but things like autoplay, preload are sometimes not supported.
― Chewshabadoo, Tuesday, 10 December 2013 19:57 (twelve years ago)
yikes. what kind of problems are you seeing on different browsers?
― Karl Malone, Tuesday, 10 December 2013 19:58 (twelve years ago)
http://www.w3fools.com/
― Chewshabadoo, Tuesday, 10 December 2013 19:58 (twelve years ago)
Neither autoplay or preload seem to work on Firefox. I know that to get audio to work on an iPad you need to simulate a click too.
― Chewshabadoo, Tuesday, 10 December 2013 20:00 (twelve years ago)
Perhaps it needs to be autoplay = "autoplay" ?
http://www.w3.org/community/webed/wiki/HTML/Elements/audio
― Chewshabadoo, Tuesday, 10 December 2013 20:01 (twelve years ago)
i changed it to autoplay = "autoplay", but my main problem is still that the audio clips are cutting off early rather than playing in full, and that removing the setTimeout piece somehow messes up the loop so that it only plays once. i'm doing my best to look up things but i'm getting nowhere
― Karl Malone, Tuesday, 10 December 2013 20:05 (twelve years ago)
I’ve got to do some actual paid work, so got to leave you hanging I’m afraid.
I have made a simple test case you may be able to integrate though:
http://jsfiddle.net/NrykE/5/
― Chewshabadoo, Tuesday, 10 December 2013 20:13 (twelve years ago)
that will autoplay and loop, tested on Firefox 26 and Chrome 31.
― Chewshabadoo, Tuesday, 10 December 2013 20:14 (twelve years ago)
no worries! thanks for posting that, and i'll see if i can mess around with it.
― Karl Malone, Tuesday, 10 December 2013 20:15 (twelve years ago)
You haven’t been forgotten!
While I think Audio is the best way forward, we’ll need a shim to deal with the incompatibility issues and expose a callback.
Researching … standby …
― Allen (etaeoe), Tuesday, 10 December 2013 20:28 (twelve years ago)
thanks for your help! in the meantime, i'm going to try to get some images in the background, rather than just background colors.
*puts headphones on**sunglasses**in the matrix*
― Karl Malone, Tuesday, 10 December 2013 20:53 (twelve years ago)
This works for me in Chrome and Firefox but my Javascript is p. rusty so it's probably not the right way to do it. I had to move the audio element out into the html to get it working, and I used an Event Listener for ended, and I kind of messed all your functions around (merged loop and playSound and then split it differently into playFirst and playNext):
(<head>...</head> as before)
<body> <audio id="player"></audio> <div id="element"> </div> <script> var colours = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = []; var player = document.getElementById("player"); function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; } function playFirst() { player.addEventListener('ended', function() { playNext() }, false); playNext(); } function playNext() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); } player.src = sounds.pop(); player.load(); changeColour(); player.play(); } function changeColour() { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } document.getElementById('element').style.background = colours.pop(); } playFirst(); </script> </body>
<script> var colours = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = []; var player = document.getElementById("player");
function playFirst() { player.addEventListener('ended', function() { playNext() }, false); playNext(); } function playNext() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); } player.src = sounds.pop(); player.load(); changeColour(); player.play(); }
playFirst(); </script> </body>
― not a player-hater i just hate a lot (a passing spacecadet), Tuesday, 10 December 2013 21:10 (twelve years ago)
it seems to work!!
let me replace one of the audio clips with something longer, to make sure it doesn't get clipped, and test it again.
― Karl Malone, Tuesday, 10 December 2013 21:13 (twelve years ago)
works!
i haven't even looked at your code/explanation to figure out how you did it, but thank you!!
― Karl Malone, Tuesday, 10 December 2013 21:15 (twelve years ago)
tbh I'm not sure why it didn't work before so I was mainly just fiddling around.
(btw Allen's shim suggestion will probably be better and work on more browsers and other things I was totally too lazy to look at so please don't let me interrupt the research)
― not a player-hater i just hate a lot (a passing spacecadet), Tuesday, 10 December 2013 21:18 (twelve years ago)
while Allen is still in the lab, can i run my progress on the images by you? i'm close to what i want to do, but i think i'm doing something wrong that is hopefully simple to correct.
to recap: right now the code changes out background colors, but i want to instead change out background images. i used the randomly selected audio part of the code as a template, and came up with this:
<!DOCTYPE html> <head> <title>Conference Call</title> <!--CSS to make images fullscreen--> <style> #element { position: fixed; top: 0; left: 0; /* Preserve aspect ratio */ min-width: 100%; min-height: 100%; } </style> </head> <body> <div id="element"> </div> <script> var imageidentifiers = ['1', '2', '3', '4', '5']; var images = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; } function playSound() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); } var sound = '<audio src="' + sounds.pop() + '" hidden="true" type="audio/mpeg" preload="auto" autoplay="autoplay" ended="loop()"/>'; document.getElementById('element').innerHTML = sound; }function ImageURI(identifier) { return 'images/' + identifier + '.gif'; } function changeImage() { if (!images.length) { images = shuffle(imageidentifiers.map(ImageURI)); }var image = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()"/>'; document.getElementById('element').innerHTML = image; } function loop() { playSound(); changeImage(); setTimeout(function() { loop() }, 1500); //change number for delay between sounds } loop(); </script> </body></html>
<script> var imageidentifiers = ['1', '2', '3', '4', '5']; var images = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click']; var sounds = [];
var sound = '<audio src="' + sounds.pop() + '" hidden="true" type="audio/mpeg" preload="auto" autoplay="autoplay" ended="loop()"/>';
function ImageURI(identifier) { return 'images/' + identifier + '.gif'; }
function changeImage() { if (!images.length) { images = shuffle(imageidentifiers.map(ImageURI)); }
var image = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()"/>';
document.getElementById('element').innerHTML = image; }
function loop() { playSound(); changeImage(); setTimeout(function() { loop() }, 1500); //change number for delay between sounds }
(this is based off of a previous version of the code, not the one that you just posted, spacecadet)
the good news: the images work! it's switching out the images! i did something!the bad news: now the audio doesn't work.
i think the problem might be that both the sound and images use a similar getElementById element. respectively, they look like this:
document.getElementById('element').innerHTML = sound;document.getElementById('element').innerHTML = image;
is that the problem? they're both referring 'element' and somehow that means that the image supercedes the sound? i...have no idea what i'm doing
― Karl Malone, Tuesday, 10 December 2013 21:31 (twelve years ago)
also, i don't even know what .innerHTML does. i just used it because i was following the sound template. is there a better element to use there that's image specific?
― Karl Malone, Tuesday, 10 December 2013 21:33 (twelve years ago)
Ah, you're instincts are getting there, that is indeed the problem. You're overwriting the HTML that embeds the audio with the image. Let me brush up on some Javascript/DOM to figure get it right.
xpost again, yes. (InnerHTML literally is the HTML that goes between, or inside, if you will, two HTML tags.)
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 21:42 (twelve years ago)
Try this: document.getElementById('element').style.backgroundImage = image;
― Matt Groening's Cousin (Leee), Tuesday, 10 December 2013 21:43 (twelve years ago)
hmmm...that brings the audio back, and kills the images.
― Karl Malone, Tuesday, 10 December 2013 21:48 (twelve years ago)
!!! ok, i combined my halfworking image code with spacecadet's working sound and got an unholy amalgam that works! here's the code:
<!DOCTYPE html> <head> <title>Conference Call</title> <!--CSS to make images fullscreen--> <style> #element { position: fixed; top: 0; left: 0; /* Preserve aspect ratio */ min-width: 100%; min-height: 100%; } </style> </head><body> <audio id="player"></audio> <div id="element"> </div> <script> var imageidentifiers = ['1', '2', '3', '4', '5']; var images = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click', 'longer']; var sounds = []; var player = document.getElementById("player"); function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; } function playFirst() { player.addEventListener('ended', function() { playNext() }, false); playNext(); } function playNext() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); } player.src = sounds.pop(); player.load(); changeImage(); player.play(); } function ImageURI(identifier) { return 'images/' + identifier + '.gif'; } function changeImage() { if (!images.length) { images = shuffle(imageidentifiers.map(ImageURI)); }var image = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()"/> '; document.getElementById('element').innerHTML = image; } playFirst(); </script> </body></html>
<body> <audio id="player"></audio> <div id="element"> </div>
<script> var imageidentifiers = ['1', '2', '3', '4', '5']; var images = [] var soundidentifiers = ['1', '2', '3', '4', '5', 'click', 'longer']; var sounds = []; var player = document.getElementById("player");
function playFirst() { player.addEventListener('ended', function() { playNext() }, false); playNext(); } function playNext() { if (!sounds.length) { sounds = shuffle(soundidentifiers.map(SoundURI)); } player.src = sounds.pop(); player.load(); changeImage(); player.play(); }
var image = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()"/> ';
playFirst(); </script> </body></html>
― Karl Malone, Tuesday, 10 December 2013 22:08 (twelve years ago)
now there's only one thing that's not working: the images aren't stretching to full screen. instead, they just appear at whatever size i saved them as.
― Karl Malone, Tuesday, 10 December 2013 22:10 (twelve years ago)
I expect significant equity! ;)
<!DOCTYPE html> <head> <title>Conference Call</title> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> var colours = [] var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function change(playlist, colours) { play(playlist); repaint(colours); } function play(playlist) { document.getElementsByTagName('audio')[0].innerHTML = "<source src='" + playlist.pop() + "' />"; return playlist; } function repaint(colours) { document.getElementsByTagName('body')[0].style.background = colours.pop(); return colours; } window.onload = function() { var index = 0; var colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); var playlist = shuffle(identifiers.map(URI)); change(playlist, colours); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { index++; if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } if (!playlist.length) { playlist = shuffle(identifiers.map(URI)); } change(playlist, colours); }); } </script> </body></html>
<body> <audio autoplay='true' hidden='true'>
</audio>
function change(playlist, colours) { play(playlist);
repaint(colours); }
function play(playlist) { document.getElementsByTagName('audio')[0].innerHTML = "<source src='" + playlist.pop() + "' />";
return playlist; }
function repaint(colours) { document.getElementsByTagName('body')[0].style.background = colours.pop();
return colours; }
window.onload = function() { var index = 0;
var colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']);
var playlist = shuffle(identifiers.map(URI));
change(playlist, colours);
document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { index++;
if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); }
if (!playlist.length) { playlist = shuffle(identifiers.map(URI)); }
change(playlist, colours); }); } </script> </body></html>
― Allen (etaeoe), Tuesday, 10 December 2013 22:21 (twelve years ago)
Oops. Fixed:
<!DOCTYPE html> <head> <title>Conference Call</title> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> var colours = [] var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function change(playlist, colours) { play(playlist); repaint(colours); } function play(playlist) { document.getElementsByTagName('audio')[0].innerHTML = "<source src='" + playlist.pop() + "' />"; return playlist; } function repaint(colours) { document.getElementsByTagName('body')[0].style.background = colours.pop(); return colours; } window.onload = function() { var colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); var playlist = shuffle(identifiers.map(URI)); change(playlist, colours); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } if (!playlist.length) { playlist = shuffle(identifiers.map(URI)); } change(playlist, colours); }); } </script> </body></html>
window.onload = function() { var colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']);
document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); }
― Allen (etaeoe), Tuesday, 10 December 2013 22:22 (twelve years ago)
hmmm...that seems to only play one audio clip, and then it changes to a second color, and then it stops. also, i think we managed to hit a working version (see the post just above yours)
― Karl Malone, Tuesday, 10 December 2013 22:28 (twelve years ago)
the only thing that's not working now is that the images aren't full screen for some reason.
although, if the working code isn't going to be very efficient, or if it could cause problems across different browsers, i suppose now's the time to correct it!
...ok, images are full screen now again!
PHEW. it seems like i have a working version now. i want to improve it as much as i can before going live, but hopefully within a few days it'll be up on
conferencecall.biz
which i still need to register
― Karl Malone, Tuesday, 10 December 2013 22:35 (twelve years ago)
What browser are you using?
― Allen (etaeoe), Tuesday, 10 December 2013 22:36 (twelve years ago)
chrome/safari
― Karl Malone, Tuesday, 10 December 2013 22:41 (twelve years ago)
[quote]<!DOCTYPE html> <head> <title>Conference Call</title> </head>
function play(playlist) { audio = document.getElementsByTagName('audio')[0]
audio.innerHTML = "<source src='" + playlist.pop() + "' />";
audio.play();
change(playlist, colours); }); } </script> </body></html>[/quote]
― Allen (etaeoe), Tuesday, 10 December 2013 22:45 (twelve years ago)
Oops.
<!DOCTYPE html> <head> <title>Conference Call</title> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> var colours = [] var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function change(playlist, colours) { play(playlist); repaint(colours); } function play(playlist) { audio = document.getElementsByTagName('audio')[0] audio.innerHTML = "<source src='" + playlist.pop() + "' />"; audio.play(); return playlist; } function repaint(colours) { document.getElementsByTagName('body')[0].style.background = colours.pop(); return colours; } window.onload = function() { var colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); var playlist = shuffle(identifiers.map(URI)); change(playlist, colours); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!colours.length) { colours = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } if (!playlist.length) { playlist = shuffle(identifiers.map(URI)); } change(playlist, colours); }); } </script> </body></html>
oh wait, i was just testing it within dreamweaver, sorry. it works in chrome. ok - i need to go through it and update it, because now i had renamed some stuff and switched things around to point to my own files, and changed the visuals so they display images rather than background colors.
― Karl Malone, Tuesday, 10 December 2013 22:47 (twelve years ago)
It works on Chrome, Safari, and Internet Explorer. There’s still an issue in Firefox. I’ll look at it after yoga!
― Allen (etaeoe), Tuesday, 10 December 2013 22:50 (twelve years ago)
You should probably make an Amazon AWS account: http://aws.amazon.com/ and download Transmit: http://panic.com/transmit/!
― Allen (etaeoe), Tuesday, 10 December 2013 22:51 (twelve years ago)
For an even easier way of hosting you can use Dropbox seeing at the HTML is static.
― Chewshabadoo, Tuesday, 10 December 2013 22:58 (twelve years ago)
Can you use a custom domain with Dropbox?
― Allen (etaeoe), Tuesday, 10 December 2013 23:02 (twelve years ago)
i'm still trying to get the images to work again using Allen's code. it works with background colors, but i want to use images.
― Karl Malone, Tuesday, 10 December 2013 23:09 (twelve years ago)
i was able to recode it using spacecadet's code, but the new allen version is a different structure and i'm not familiar with some of the elements so i'm back to square one!
on the plus side, i think i'm learning a lot
― Karl Malone, Tuesday, 10 December 2013 23:10 (twelve years ago)
this is my slightly updated allen code - note that i replaced "colours" with "images" and specified SoundIdentifiers and SoundURI.
<!DOCTYPE html> <head> <title>Conference Call</title> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> var images = [] var SoundIdentifiers = ['1', '2', '3', '4', '5', 'click', 'longer']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function SoundURI(Soundidentifier) { return 'audio/' + Soundidentifier + '.mp3'; } function change(playlist, images) { play(playlist); repaint(images); } function play(playlist) { audio = document.getElementsByTagName('audio')[0] audio.innerHTML = "<source src='" + playlist.pop() + "' />"; audio.play(); return playlist; } function repaint(images) { document.getElementsByTagName('body')[0].style.background = images.pop(); return images; } window.onload = function() { var images = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); var playlist = shuffle(SoundIdentifiers.map(SoundURI)); change(playlist, images); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!images.length) { images = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); } if (!playlist.length) { playlist = shuffle(SoundIdentifiers.map(SoundURI)); } change(playlist, images); }); } </script> </body></html>
<script> var images = [] var SoundIdentifiers = ['1', '2', '3', '4', '5', 'click', 'longer']; var sounds = [];
function SoundURI(Soundidentifier) { return 'audio/' + Soundidentifier + '.mp3'; }
function change(playlist, images) { play(playlist);
repaint(images); }
function repaint(images) { document.getElementsByTagName('body')[0].style.background = images.pop();
return images; }
window.onload = function() { var images = shuffle(['red', 'yellow', 'green', 'purple', 'orange']);
var playlist = shuffle(SoundIdentifiers.map(SoundURI));
change(playlist, images);
document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!images.length) { images = shuffle(['red', 'yellow', 'green', 'purple', 'orange']); }
if (!playlist.length) { playlist = shuffle(SoundIdentifiers.map(SoundURI)); }
change(playlist, images); }); } </script> </body></html>
― Karl Malone, Tuesday, 10 December 2013 23:16 (twelve years ago)
ugh, i'm stuck. i should probably quit for the night because i'm driving myself crazy. i can't figure out how to make it shuffle images instead of solid colors. i'm sorry, ya'll. i really gave it the old college try but i can't figure it out.
― Karl Malone, Wednesday, 11 December 2013 00:43 (twelve years ago)
i have most of the pieces i need to do it, i just can't figure out how to integrate it into allen's code.
here's the imageidentifiers variable, similar to how we define the audioidentifiers variable:
var imageidentifiers = ['1', '2', '3', '4', '5'];
here's the piece that locates the gifs in my folder structure, similar to the piece that locates the .mp3s in my folder structure:
and finally, here's the piece that successfully displayed the gifs in full screen in an earlier version of all of this:
function changeImage() { if (!images.length) { images = shuffle(imageidentifiers.map(ImageURI)); }var image = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()" width="100%" height="100%" /> '; document.getElementById('element').innerHTML = image; }
var image = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()" width="100%" height="100%" /> ';
i can't manage to make it work with allen's code, though, even though i know it shouldn't be difficult.
― Karl Malone, Wednesday, 11 December 2013 00:51 (twelve years ago)
can you put an alert(image);to see whether the image html is what you expect?
― Philip Nunez, Wednesday, 11 December 2013 00:59 (twelve years ago)
hold the phone - after 3 hours, i've finally made a breakthrough and at least it's displaying a single gif, albeit with no audio. and it's not cycling to the next. here is what i have:
<!DOCTYPE html> <head> <title>Conference Call</title> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> var imageidentifiers = ['1', '2', '3', '4', '5']; var images = [] var SoundIdentifiers = ['1', '2', '3', '4', '5', 'click', 'longer']; var sounds = []; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; } function ImageURI(identifier) { return 'images/' + identifier + '.gif'; } function change(playlist, images) { play(playlist); repaint(images); } function play(playlist) { audio = document.getElementsByTagName('audio')[0] audio.innerHTML = "<source src='" + playlist.pop() + "' />"; audio.play(); return playlist; } function repaint(images) { body = document.getElementsByTagName('body')[0] body.innerHTML = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()" width="100%" height="100%" /> '; body.repaint(); return images; } window.onload = function() { var images = shuffle(imageidentifiers.map(ImageURI)); var playlist = shuffle(SoundIdentifiers.map(SoundURI)); change(playlist, images); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!images.length); images = shuffle(imageidentifiers.map(ImageURI)); if (!playlist.length) { playlist = shuffle(SoundIdentifiers.map(SoundURI)); } change(playlist, images); }); } </script> </body></html>
<script> var imageidentifiers = ['1', '2', '3', '4', '5']; var images = [] var SoundIdentifiers = ['1', '2', '3', '4', '5', 'click', 'longer']; var sounds = [];
function SoundURI(identifier) { return 'audio/' + identifier + '.mp3'; } function ImageURI(identifier) { return 'images/' + identifier + '.gif'; }
function repaint(images) { body = document.getElementsByTagName('body')[0] body.innerHTML = '<img src="' + images.pop() + '"preload="auto" autoplay="autoplay" ended="loop()" width="100%" height="100%" /> '; body.repaint();
window.onload = function() { var images = shuffle(imageidentifiers.map(ImageURI));
document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!images.length); images = shuffle(imageidentifiers.map(ImageURI)); if (!playlist.length) { playlist = shuffle(SoundIdentifiers.map(SoundURI)); }
― Karl Malone, Wednesday, 11 December 2013 01:04 (twelve years ago)
is this legal? looks a little fishy... if (!images.length); images = shuffle(imageidentifiers.map(ImageURI));
― Philip Nunez, Wednesday, 11 December 2013 01:12 (twelve years ago)
seems to work - no syntax errors or warnings or anything like that. i have to say, though - i don't understand that whole last section of the code. i have no idea what function(e) is even referring to. where is "e" elsewhere in the code?
― Karl Malone, Wednesday, 11 December 2013 01:30 (twelve years ago)
(feel free to treat that as a rhetorical question, as there are many other bits and pieces i don't understand either, and i could go on all night with questions like that!)
It won't throw any errors, but it's what's called a logic error. You need to remove the semi-colon at the end of the if statement so that it reads like this:
if (!images.length) { images = shuffle(imageidentifiers.map(ImageURI));}
― Matt Groening's Cousin (Leee), Wednesday, 11 December 2013 01:34 (twelve years ago)
I wish it was next week (winter break) so I could work on this code ZS!! If not fixed by dec 14 please bump, I must cram for exams this week but love a good JS mystery! I was tempted to scold you for embedding audio at all, but I know you of all people can be trusted with it.
― she started dancing to that (Finefinemusic), Wednesday, 11 December 2013 01:53 (twelve years ago)
Whaaa? I thought I was talking to the Mailman!
― Matt Groening's Cousin (Leee), Wednesday, 11 December 2013 01:55 (twelve years ago)
You're on your own, man!
― Matt Groening's Cousin (Leee), Wednesday, 11 December 2013 01:56 (twelve years ago)
Oh shit
― she started dancing to that (Finefinemusic), Wednesday, 11 December 2013 03:01 (twelve years ago)
i didn't want it to come to this, but yes, i am Z S...and NBA superstar Karl Malone, AKA "the Mailman". i can tell you more, but first i could really use your help in coding this absurd conference call simulator.
― Karl Malone, Wednesday, 11 December 2013 04:52 (twelve years ago)
Phew! I had no idea who The Mailman is, and worried I'd doxxed out a longtime beef (but who could hate a ray of sunshine?)
― she started dancing to that (Finefinemusic), Wednesday, 11 December 2013 05:01 (twelve years ago)
Now that I know you can't crush me with your magnificent delts, I feel more free in giving you bad advice! (I'm setting you up like I'm Stockton.)
― Matt Groening's Cousin (Leee), Wednesday, 11 December 2013 06:38 (twelve years ago)
Backgrounds and such:
<!DOCTYPE html> <head> <title>Conference Call</title> <style> body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } </style> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = []; var images = ['100', '200', '300', '400', '500']; function shuffle(collection) { var counter = collection.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = collection[counter]; collection[counter] = collection[index]; collection[index] = temporary; } return collection; } function image(identifier) { return 'http://dummyimage.com/' + identifier; } function URI(identifier) { return 'http://www.freesound.org/data/previews/169/' + identifier + '_1587259-lq.mp3'; } function change(playlist, colours) { play(playlist); repaint(colours); } function play(playlist) { audio = document.getElementsByTagName('audio')[0] audio.innerHTML = "<source src='" + playlist.pop() + "' />"; audio.play(); return playlist; } function repaint(gallery) { document.body.style.backgroundImage = 'url(' + gallery.pop() + ')'; return gallery; } window.onload = function() { var gallery = shuffle(images.map(image)); var playlist = shuffle(identifiers.map(URI)); change(playlist, gallery); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!gallery.length) { gallery = shuffle(images.map(image)); } if (!playlist.length) { playlist = shuffle(identifiers.map(URI)); } change(playlist, gallery); }); } </script> </body></html>
<style> body { background: no-repeat center center fixed;
-webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } </style> </head>
<script> var identifiers = ['169198', '169196', '169203', '169202', '169201']; var sounds = [];
var images = ['100', '200', '300', '400', '500'];
function image(identifier) { return 'http://dummyimage.com/' + identifier; }
function repaint(gallery) { document.body.style.backgroundImage = 'url(' + gallery.pop() + ')';
return gallery; }
window.onload = function() { var gallery = shuffle(images.map(image));
change(playlist, gallery);
document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { if (!gallery.length) { gallery = shuffle(images.map(image)); }
change(playlist, gallery); }); } </script> </body></html>
― Allen (etaeoe), Wednesday, 11 December 2013 15:53 (twelve years ago)
Improved:
<!DOCTYPE html> <head> <title>Conference Call</title> <style> body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } </style> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> Array.prototype.sample = function() { return this.shuffle()[0]; } Array.prototype.shuffle = function() { var counter = this.length, temporary, index; while (counter--) { index = (Math.random() * counter) | 0; temporary = this[counter]; this[counter] = this[index]; this[index] = temporary; } return this; } var images = ['100', '200', '300', '400', '500'] function image() { return 'http://dummyimage.com/' + images.sample(); } var tracks = ['169198', '169196', '169203', '169202', '169201'] function track() { return 'http://www.freesound.org/data/previews/169/'+ tracks.sample() + '_1587259-lq.mp3'; } function render() { document.body.style.backgroundImage = 'url(' + image() + ')'; audio = document.getElementsByTagName('audio')[0] audio.innerHTML = "<source src='" + track() + "' />"; audio.play(); } window.onload = function() { render(); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { render(); }); } </script> </body></html>
<script> Array.prototype.sample = function() { return this.shuffle()[0]; }
Array.prototype.shuffle = function() { var counter = this.length, temporary, index;
temporary = this[counter]; this[counter] = this[index]; this[index] = temporary; }
return this; }
var images = ['100', '200', '300', '400', '500']
function image() { return 'http://dummyimage.com/' + images.sample(); }
var tracks = ['169198', '169196', '169203', '169202', '169201']
function track() { return 'http://www.freesound.org/data/previews/169/'+ tracks.sample() + '_1587259-lq.mp3'; }
function render() { document.body.style.backgroundImage = 'url(' + image() + ')';
audio = document.getElementsByTagName('audio')[0]
audio.innerHTML = "<source src='" + track() + "' />";
audio.play(); }
window.onload = function() { render();
document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { render(); }); } </script> </body></html>
― Allen (etaeoe), Wednesday, 11 December 2013 16:35 (twelve years ago)
Hrm. Safari performance is abysmal. Maybe it’d be faster to construct a substantial shuffled array, say 100 tracks, and inject them into a hidden element in the DOM once rather than injecting into the DOM with each sample.
― Allen (etaeoe), Wednesday, 11 December 2013 16:47 (twelve years ago)
(does that shuffle do anything? the way i'm reading it it shuffles and returns the first result everytime you ask for a new track. you may as well just pick a random result)
― koogs, Wednesday, 11 December 2013 16:51 (twelve years ago)
xp Don't really know JS, but instead of shuffling the whole array each time, why not just generate a random integer i between 0 and 4 and load the ith track?
― freemen (on the) space (seandalai), Wednesday, 11 December 2013 16:55 (twelve years ago)
It shuffles. ;)
I kept it because I still don’t know if I want to move away from the shuffled stack solution.
FWIW, I just profiled. It’s 98% idle. Nonetheless, most of the cost is in getElementsByTagName and style.backgroundImage.
― Allen (etaeoe), Wednesday, 11 December 2013 17:00 (twelve years ago)
and innerHTML.
!!
i can't think you all enough for doing this. i'm at work now, but when i get home i'll give it a shot.
Maybe it’d be faster to construct a substantial shuffled array, say 100 tracks, and inject them into a hidden element in the DOM once rather than injecting into the DOM with each sample.
i'm aiming to have about 50-60 different audio samples. each should be around 3-10 seconds long, and they'll most likely be small because they're just voice recordings and can be encoded at a low bitrate.
i'm working on the background images, but they should be gifs of around 200 to 400 kb each. maybe 10-15 of those in total.
― Karl Malone, Wednesday, 11 December 2013 17:45 (twelve years ago)
this probably won't work when testing local pics/sounds, but it is very cool for testing/coding pages:https://thimble.webmaker.org/
― Philip Nunez, Wednesday, 11 December 2013 18:17 (twelve years ago)
performance question: does the number of total audio clips in the array matter, performance-wise, if they're being randomly selected? would performance be better if there were only 50 clips in the array rather than 100, or does it make a difference?
― Karl Malone, Wednesday, 11 December 2013 18:57 (twelve years ago)
If you're shuffling then performance on that part will scale linearly with the size of the array. If you're uniformly sampling a random array index then it shouldn't make a difference how long the array is.
― freemen (on the) space (seandalai), Wednesday, 11 December 2013 19:02 (twelve years ago)
i would think most of the cost is just in loading the sounds and pictures rather than in shuffling them butif the profiler says document.getElementsByTagName('audio') is the most expensive part, maybe set a variable once and use that instead?
like:var audio = document.getElementsByTagName('audio')[0];
then just use audio instead of document.getElementsByTagName('audio')[0];
― Philip Nunez, Wednesday, 11 December 2013 19:06 (twelve years ago)
No, but the number of unique elements in the array matters because each unique element corresponds to a unique HTTP request. If you’re making 10-15 requests for images and 50-60 requests for audio files, you’ll need to write a function for pre-loading the image and audio files rather than loading them upon usage.
― Allen (etaeoe), Wednesday, 11 December 2013 19:36 (twelve years ago)
An improved version. Removes some unnecessary string concatenation, removes shuffle (thanks koogs), and creates a global variable for audio (thanks Philip Nunez).
<!DOCTYPE html><html> <head> <title>Conference Call</title> <style> body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } </style> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> Array.prototype.sample = function() { return this[Math.floor(Math.random() * this.length)]; } var audio = document.getElementsByTagName('audio')[0] var images = ['100', '200', '300', '400', '500'] function image() { return 'url(http://dummyimage.com/' + images.sample() + ')'; } var tracks = ['169198', '169196', '169203', '169202', '169201'] function track() { return '<source src="http://www.freesound.org/data/previews/169/' + tracks.sample() + '_1587259-lq.mp3" />'; } function render() { document.body.style.backgroundImage = image(); audio.innerHTML = track(); audio.play(); } window.onload = function() { render(); document.getElementsByTagName('audio')[0].addEventListener('ended', function(e) { render(); }); } </script> </body></html>
<script> Array.prototype.sample = function() { return this[Math.floor(Math.random() * this.length)]; }
var audio = document.getElementsByTagName('audio')[0]
function image() { return 'url(http://dummyimage.com/' + images.sample() + ')'; }
function track() { return '<source src="http://www.freesound.org/data/previews/169/' + tracks.sample() + '_1587259-lq.mp3" />'; }
function render() { document.body.style.backgroundImage = image();
audio.innerHTML = track();
― Allen (etaeoe), Wednesday, 11 December 2013 19:47 (twelve years ago)
Even better:
<!DOCTYPE html><html> <head> <title>Conference Call</title> <style> body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } </style> </head> <body> <audio autoplay='true' hidden='true'> </audio> <script> Array.prototype.sample = function() { return this[Math.floor(Math.random() * this.length)]; } var audio = document.getElementsByTagName('audio')[0] var images = ['100', '200', '300', '400', '500'] function image() { return 'url(http://dummyimage.com/' + images.sample() + ')'; } var tracks = ['169198', '169196', '169203', '169202', '169201'] function track() { return '<source src="http://www.freesound.org/data/previews/169/' + tracks.sample() + '_1587259-lq.mp3" />'; } function render() { document.body.style.backgroundImage = image(); audio.innerHTML = track(); audio.play(); } window.onload = function() { render(); audio.addEventListener('ended', function(e) { render(); }); } </script> </body></html>
audio.addEventListener('ended', function(e) { render(); }); } </script> </body></html>
https://dl-web.dropbox.com/get/Public/profile.png?w=AAAbjeEjxZRjUjIlqt-AbSR6AMDUctdVy5rjoDK9p_ol5w
― Allen (etaeoe), Wednesday, 11 December 2013 19:53 (twelve years ago)
I like to think of that blank post as you stepping back to admire your handiwork.
― Matt Groening's Cousin (Leee), Wednesday, 11 December 2013 19:57 (twelve years ago)
:D
https://www.dropbox.com/s/qwgdvqizzubfars/profile.png
― Allen (etaeoe), Wednesday, 11 December 2013 19:59 (twelve years ago)
god damnit
http://jsfiddle.net/
― am0n, Wednesday, 11 December 2013 22:29 (twelve years ago)
still at work. but in regards to this:
― Allen (etaeoe)
i just signed up for a AWS account (and i already have transmit). i'm assuming that the service i should use is the Amazon Simple Storage Service, which i will hereafter refer to as the ASS Service? and i'd host the images/sounds there? and the reason is that would be faster for the user?
― Karl Malone, Wednesday, 11 December 2013 22:31 (twelve years ago)
http://jsfiddle.net/4RtbM/
― am0n, Wednesday, 11 December 2013 22:34 (twelve years ago)
the other option is just to host it on something like dreamhost. i don't anticipate a ton of traffic to the site - probably 50 people will visit it the first few days, and then no one will ever come back. but if using AWS would be necessary for acceptable performance, then that's a different matter.
― Karl Malone, Wednesday, 11 December 2013 22:48 (twelve years ago)
oh: i can see i can do the whole thing through AWS, appraently: http://docs.aws.amazon.com/gettingstarted/latest/swh/website-hosting-intro.html
― Karl Malone, Wednesday, 11 December 2013 22:53 (twelve years ago)
isUserAMonkey()
― am0n, Wednesday, 11 December 2013 22:54 (twelve years ago)
you can overwrite tumblr theme HTML to regular html if it's a one page thing.
― Philip Nunez, Wednesday, 11 December 2013 23:52 (twelve years ago)
Yes. You should use Amazon S3. It's absurdly cheap for this type of thing and will allow you to use a custom domain.
― Allen (etaeoe), Thursday, 12 December 2013 00:36 (twelve years ago)
just tested it - YES! so awesome that this works.
so now that it's working, i have an icing on the cake kind of question. *ducks*
1) would it be possible, in the background of all the cycling audio and images, to have a short audio track that is playing on repeat? i'd like to have some kinda weird droney kind of noise going on quietly in the background of the call. if not, that's fine, it would just be neat to add if it's easy.
― Karl Malone, Thursday, 12 December 2013 01:21 (twelve years ago)
add this after the first <audio>...</audio> thing:<audio autoplay='true' hidden='true' loop> <source src="http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3"; /> </audio>
replace http://www.freesound.org/data/previews/169/169198_1587259-lq.mp3 with your drone loop
― Philip Nunez, Thursday, 12 December 2013 01:35 (twelve years ago)
perfect!
i know this is a small token of appreciation totally out of proportion to help provided, but i'm going to have an "about" link at the bottom, and i'd like to at least list your names. is this ok?
etaeoe, Leee, Chewshabadoo, Philip Nunez, seandalai, a passing spacecadet, ledge
let me know if a) you don't want to be thanks in a public way, b) you'd rather be listed under a different name, c)you have a website you'd like me to link to as your name.
just let me know here, or if for some reason you'd rather email send me an email at weinventyouweinventyou at gmail dot com.
― Karl Malone, Thursday, 12 December 2013 01:43 (twelve years ago)
ok - i have registered conferencecall.biz, i have signed up for AWS, completed most of the steps in the guide i linked to above (still waiting for the new domain name to go through), and i'm about to take advantage of amazon's CloudFront service to boost performance. exciting!
― Karl Malone, Thursday, 12 December 2013 03:08 (twelve years ago)
hmmm, actually i'll probably hold off on cloudfront for now because it might be a few dollars per month and i'm not sure anyone's going to visit in the first place. but nice to know it's there if i want it.
― Karl Malone, Thursday, 12 December 2013 03:12 (twelve years ago)
please don't share with anyone, but here's an early test version:
http://conferencecall.biz.s3-website-us-east-1.amazonaws.com
the url will look better after my domain registration goes through. apparently it's going to take until Dec 16 because i picked it up in an expiring domain auction, and technically the original owner has until Dec 16 to reclaim it if they want it.
this test version has five audio clips and three images. i also added a background droney kind of loop (temporary until i make a better one). everything on there is just for test purposes, so don't make fun of my terrible voice acting.
so right now, i'm wondering two things:
1) is the performance ok? does it take longer than a second or two to load? i'm doing my best to keep all of the images and audio files at about 75kb or less. the background droney audio file is 2.4 MB, but the final version should be smaller.
2) so at some point, the randomization of the images and audio seems to be...truly random, which means that it'll sometimes randomly select the same file that was just played. that shouldn't be so much of a problem once there are 60+ audio files and lots of images, but even then, there would still be a one in 60 chance of repeating a clip twice in a row. in an earlier version of this, i think there was something in the code to ensure that all files in an array had to be played once before the whole thing would refresh - is that something that's easy to add back in? if not, no biggie!
― Karl Malone, Thursday, 12 December 2013 19:23 (twelve years ago)
This is fantastic.
I spent some time working on this last night. I think we should move back to the stack method, especially if we’re planning on making more than 50 HTTP requests. So, we’ll sample (without replacement --- therefore, we won’t have the repeating track problem) 10 or so tracks onto a stack, then load them concurrently. Rinse and repeat.
I’ll post some code soon.
― Allen (etaeoe), Thursday, 12 December 2013 19:32 (twelve years ago)
I'm not hearing anything? (Firefox 25.0.1, Ubuntu 12.04)
To get (2) you could go back to shuffling (but not shuffling at every sample).
― freemen (on the) space (seandalai), Thursday, 12 December 2013 19:38 (twelve years ago)
hmmm, i remember earlier on we were looking at the <audio> element and noticed that it wasn't compatible with some browser versions, and i think firefox in particular was the one that had big issues.
― Karl Malone, Thursday, 12 December 2013 19:46 (twelve years ago)
I have it working on Firefox with a shim.
However, it doesn't work on Mobile Safari. :-(
― Allen (etaeoe), Thursday, 12 December 2013 19:49 (twelve years ago)
I heard the audio and I'm running Firefox 25.0.1
― how's life, Thursday, 12 December 2013 19:49 (twelve years ago)
Linux Mint 13 / Firefox 26.0 - can hear audio, but it's just the one bit of speech over and over again, is that expected?
― koogs, Thursday, 12 December 2013 19:51 (twelve years ago)
Oh wait, I think I just can't play mp3s. Nothing to see here.
― freemen (on the) space (seandalai), Thursday, 12 December 2013 19:58 (twelve years ago)
nope, there should be 5 different bits of audio that it cycles between, although currently there's a chance that a clip will randomly repeat (once, twice, or more - one time it randomly selected the same clip 5 times in a row!)
― Karl Malone, Thursday, 12 December 2013 20:01 (twelve years ago)
one thing that's odd, though, is that when i test the code within Dreamweaver, it does the same thing - it repeats the audioclip over and over. but when i test it in a browser, it works.
― Karl Malone, Thursday, 12 December 2013 20:02 (twelve years ago)
I'm only hearing the same audioclip over and over until I refresh it.
― how's life, Thursday, 12 December 2013 20:05 (twelve years ago)
ditto. images change, speech doesn't.
― koogs, Thursday, 12 December 2013 20:08 (twelve years ago)
hmmm, that's odd! well, it looks like allen's working on a new code structure anyway, so i'm not going to worry about it too much for now
― Karl Malone, Thursday, 12 December 2013 20:09 (twelve years ago)
Firefox issue is fixed. I'll post when I'm home.
― Allen (etaeoe), Thursday, 12 December 2013 20:14 (twelve years ago)
once again, thanks!
― Karl Malone, Thursday, 12 December 2013 20:18 (twelve years ago)
ok, just to show that i am learning a little bit, i made a simple intro page
it asks you to unmute your line and click anywhere to join the conference. when you click:
1) the message should fade out2) a short audio clip should play ("you will now be placed in the conference")3) after the clip plays, it should automatically take you to the next page
― Karl Malone, Thursday, 12 December 2013 23:16 (twelve years ago)
the weird thing is, it works 3 or 4 times in a row - you click and everything happens that should happen. but sometimes, for seemingly no reason, it stops working for me on the 4th or 5th time i reload the homepage. closing and reopening the tab seems to fix it. ?
― Karl Malone, Thursday, 12 December 2013 23:18 (twelve years ago)
wait...i think i've identified the cause of the problem, at least.
the functionality is fine with this link: http://conferencecall.biz.s3-website-us-east-1.amazonaws.com/but not with this link: https://s3.amazonaws.com/conferencecall.biz/index.html
― Karl Malone, Thursday, 12 December 2013 23:22 (twelve years ago)
Ah, the world of bug fixing!
― Chewshabadoo, Friday, 13 December 2013 08:00 (twelve years ago)
I've been working on some CSS stuff ... (note: JavaScript is kind of broken in this build)
<!DOCTYPE html><html> <head> <title>Conference Call</title> <style> @charset "UTF-8"; * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } b, strong { font-weight: bold; } small { font-size: 80%; } img { border: 0; } svg:not(:root) { overflow: hidden; } button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ } input { line-height: normal; } button, select { text-transform: none; } body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } h1, h2 { text-align: left; text-transform: uppercase; } span.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; } html { height: 100%; } body { display: -moz-box; display: -webkit-box; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; /* OLD… */ -ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100%; } h1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; } h1 span { background: #e96e57; color: white; font-weight: 500; letter-spacing: 1px; border-radius: 3px; padding: 1em 1.5em; } h1 span:hover { background: #C86456; cursor: pointer; } h1 { color: #dacdb8; } </style> </head> <body> <h1><span>Join</span> a conference call</h1> <audio autoplay='true' hidden='true' id='musique_concrete' loop> </audio> <audio autoplay='true' hidden='true' id='sample'> </audio> <script> Array.prototype.sample = function() { return this[Math.floor(Math.random() * this.length)]; } function fadeIn(element) { var opacity = 0; var timer = setInterval(function () { if (opacity >= 0.001){ clearInterval(timer); } element.style.opacity = opacity; element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; opacity += opacity * 0.1; }, 50); } function fadeOut(element) { var opacity = 1; var timer = setInterval(function () { if (opacity <= 0.001){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = opacity; element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; opacity -= opacity * 0.1; }, 50); } var join = document.getElementsByTagName('span')[0] join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]); fadeOut(document.getElementsByTagName('body')[0]); musique_concrete = document.getElementById('musique_concrete'); musique_concrete.innerHTML = "<source src='https://s3.amazonaws.com/conferencecall.biz/Audio/bounce.mp3' />"; document.body.style.backgroundImage = image(); fadeOut(document.getElementsByTagName('body')[0]); connect(); }; var audio = document.getElementsByTagName('audio')[0] var images = ['1', '2', '3', '4', '5', '6', '7', '8'] function image() { return 'url(https://s3.amazonaws.com/conferencecall.biz/Images/' + images.sample() + '.gif)'; } var tracks = ['one', 'two', 'three', 'four', 'five'] function track() { return '<source src="https://s3.amazonaws.com/conferencecall.biz/Audio/' + tracks.sample() + '.mp3" />'; } function render() { document.body.style.backgroundImage = image(); audio.innerHTML = track(); audio.play(); } function connect() { render(); audio.addEventListener('ended', function(e) { render(); }); } </script> </body></html>
<style> @charset "UTF-8"; * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
/** * Remove default margin. */ body { margin: 0; }
/* ========================================================================== Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; }
/** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; }
/** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
b, strong { font-weight: bold; }
small { font-size: 80%; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
button, input, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 2 */ margin: 0; /* 3 */ }
input { line-height: normal; }
button, select { text-transform: none; }
body { background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
h1, h2 { text-align: left; text-transform: uppercase; }
span.amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal; }
html { height: 100%; }
body { display: -moz-box; display: -webkit-box; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; /* OLD… */ -ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100%; }
h1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; }
h1 span { background: #e96e57; color: white; font-weight: 500; letter-spacing: 1px; border-radius: 3px; padding: 1em 1.5em; }
h1 span:hover { background: #C86456; cursor: pointer; }
h1 { color: #dacdb8; }
</style> </head>
<body> <h1><span>Join</span> a conference call</h1>
<audio autoplay='true' hidden='true' id='musique_concrete' loop>
<audio autoplay='true' hidden='true' id='sample'>
function fadeIn(element) { var opacity = 0;
var timer = setInterval(function () { if (opacity >= 0.001){ clearInterval(timer); }
element.style.opacity = opacity; element.style.filter = 'alpha(opacity=' + opacity * 100 + ")";
opacity += opacity * 0.1; }, 50); }
function fadeOut(element) { var opacity = 1;
var timer = setInterval(function () { if (opacity <= 0.001){ clearInterval(timer);
element.style.display = 'none'; }
opacity -= opacity * 0.1; }, 50); }
var join = document.getElementsByTagName('span')[0]
join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]); fadeOut(document.getElementsByTagName('body')[0]);
musique_concrete = document.getElementById('musique_concrete');
musique_concrete.innerHTML = "<source src='https://s3.amazonaws.com/conferencecall.biz/Audio/bounce.mp3' />";
document.body.style.backgroundImage = image(); fadeOut(document.getElementsByTagName('body')[0]); connect(); };
var images = ['1', '2', '3', '4', '5', '6', '7', '8']
function image() { return 'url(https://s3.amazonaws.com/conferencecall.biz/Images/' + images.sample() + '.gif)'; }
var tracks = ['one', 'two', 'three', 'four', 'five']
function track() { return '<source src="https://s3.amazonaws.com/conferencecall.biz/Audio/' + tracks.sample() + '.mp3" />'; }
function connect() { render();
― Allen (etaeoe), Sunday, 15 December 2013 19:27 (twelve years ago)
whoa.
― Karl Malone, Sunday, 15 December 2013 19:30 (twelve years ago)
i like the new intro graphic! although i still feel the need to add some sort of "please unmute your audio" kind of instruction at the beginning, because if someone visited and had the sound off they'd be missing most of it.
i tested it just now, and it played perfectly through one iteration, and then a) switched to a blank background and b) repeated the first piece of audio over and over.
― Karl Malone, Sunday, 15 December 2013 19:35 (twelve years ago)
oh, and also it looks like the gif is only displaying for a preset amount of time, rather than syncing up to the length of the audio clip. in my test just now, the audio clip was maybe 7 seconds long, but the gif stopped displaying after roughly 2-3 seconds and then switched to the white background.
― Karl Malone, Sunday, 15 December 2013 19:37 (twelve years ago)
Oh if you have a button I think there is a way to have it work on iPhones etc which have autoloads turned off
― Philip Nunez, Sunday, 15 December 2013 20:06 (twelve years ago)
Mailman: I wasn’t paying too much attention to the copy. Just trying to figure out the CSS.
― Allen (etaeoe), Sunday, 15 December 2013 20:32 (twelve years ago)
Interesting. I'll look into this.
― Allen (etaeoe), Sunday, 15 December 2013 20:33 (twelve years ago)
Yeah. The JavaScript is pretty broke in that version. I’ll need to merge and stuff.
― Allen (etaeoe), Sunday, 15 December 2013 20:34 (twelve years ago)
Two things that’d be helpful from your end:
* Rename the tracks “1,” “2,” “3, …” rather than “one,” “two,” “three …”* Rename the “Images” directory “images” and the “Audio” directory “audio.” Unfortunately, because the way S3 is implemented, you’ll need to create a new directory and re-upload (unless you’re using Transmit, then you can use “rename” normally … I think).
― Allen (etaeoe), Sunday, 15 December 2013 20:47 (twelve years ago)
done and done! also, not that it matters, but i have 15 gifs uploaded now (in the /images folder of course)
― Karl Malone, Sunday, 15 December 2013 21:13 (twelve years ago)
also, there are now 15 pieces of audio (titled 1.mp3, etc) in there. just mentioning that because if your experience has been similar to mine, you've been driven nuts listening to the same few pieces of audio over and over agin. the new batch includes a handful from viceroy, snoball, and me.
― Karl Malone, Sunday, 15 December 2013 23:17 (twelve years ago)
Sample without replacement:
<!DOCTYPE html><html> <head> <title>Conference Call</title> <style type="text/css"> @charset "UTF-8"; * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: -moz-box; display: -webkit-box; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; /* OLD… */ -ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100%; } h1 { font-size: 2em; margin: 0.67em 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; color: #dacdb8; text-transform: uppercase; } h1 span { background: #e96e57; color: white; font-weight: 500; letter-spacing: 1px; border-radius: 3px; padding: 1em 1.5em; } h1 span:hover { background: #C86456; cursor: pointer; } </style> </head> <body> <h1><span>Join</span> a conference call</h1> <audio autoplay='true' hidden='true' id='musique_concrete' loop> </audio> <audio autoplay='true' hidden='true'> </audio> <script> function Media(count) { this.count = count; this.range(); } Media.prototype = new Array(); Media.prototype.constructor = Media; Media.prototype.range = function() { for (var j = 1; j <= this.count; j++) { this.push(j); } return this; } Media.prototype.sample = function() { var index = Math.floor(Math.random() * this.length); return this.splice(index, 1)[0]; } function Audio(count) { Media.call(this, count); } Audio.prototype = new Media(); Audio.prototype.constructor = Audio; Audio.prototype.ref = function() { if (this.length > 0) { return '<source src="audio/' + this.sample() + '.mp3" />'; } else { this.range(); return this.ref(); } } var audio = new Audio(15); function Image(count) { Media.call(this, count); } Image.prototype = new Media(); Image.prototype.constructor = Image; Image.prototype.ref = function() { if (this.length > 0) { return 'url(images/' + this.sample() + '.gif)'; } else { this.range(); return this.ref(); } } var images = new Image(15); function fadeIn(element) { var opacity = 0; var timer = setInterval(function () { if (opacity >= 0.001){ clearInterval(timer); } element.style.opacity = opacity; element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; opacity += opacity * 0.1; }, 50); } function fadeOut(element) { var opacity = 1; var timer = setInterval(function () { if (opacity <= 0.001){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = opacity; element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; opacity -= opacity * 0.1; }, 50); } var join = document.getElementsByTagName('span')[0] join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]); musique_concrete = document.getElementById('musique_concrete'); musique_concrete.innerHTML = "<source src='audio/bounce.mp3' />"; connect(); }; var audio_element = document.getElementsByTagName('audio')[1] function render() { document.body.style.backgroundImage = images.ref(); audio_element.innerHTML = audio.ref(); audio_element.play(); } function connect() { render(); audio_element.addEventListener('ended', function(e) { render(); }); } </script> </body></html>
<style type="text/css"> @charset "UTF-8"; * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { height: 100%; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: -moz-box; display: -webkit-box; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; /* OLD… */ -ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100%; }
h1 { font-size: 2em; margin: 0.67em 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; color: #dacdb8; text-transform: uppercase; } h1 span { background: #e96e57; color: white; font-weight: 500; letter-spacing: 1px; border-radius: 3px; padding: 1em 1.5em; } h1 span:hover { background: #C86456; cursor: pointer; } </style> </head>
<audio autoplay='true' hidden='true'>
<script> function Media(count) { this.count = count;
this.range(); }
Media.prototype = new Array();
Media.prototype.constructor = Media;
Media.prototype.range = function() { for (var j = 1; j <= this.count; j++) { this.push(j); }
Media.prototype.sample = function() { var index = Math.floor(Math.random() * this.length);
return this.splice(index, 1)[0]; }
function Audio(count) { Media.call(this, count); }
Audio.prototype = new Media();
Audio.prototype.constructor = Audio;
Audio.prototype.ref = function() { if (this.length > 0) { return '<source src="audio/' + this.sample() + '.mp3" />'; } else { this.range();
return this.ref(); } }
var audio = new Audio(15);
function Image(count) { Media.call(this, count); }
Image.prototype = new Media();
Image.prototype.constructor = Image;
Image.prototype.ref = function() { if (this.length > 0) { return 'url(images/' + this.sample() + '.gif)'; } else { this.range();
var images = new Image(15);
join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]);
musique_concrete.innerHTML = "<source src='audio/bounce.mp3' />";
connect(); };
var audio_element = document.getElementsByTagName('audio')[1]
function render() { document.body.style.backgroundImage = images.ref();
audio_element.innerHTML = audio.ref();
audio_element.play(); }
audio_element.addEventListener('ended', function(e) { render(); }); } </script> </body></html>
― Allen (etaeoe), Monday, 16 December 2013 17:24 (twelve years ago)
Fixed the Firefox issue:
<!DOCTYPE html><html> <head> <title>Conference Call</title> <style> @charset "UTF-8"; * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 100%; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: -moz-box; display: -webkit-box; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; /* OLD… */ -ms-flex-align: center; /* You know the drill now… */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100%; } h1 { font-size: 2em; margin: 0.67em 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; color: #dacdb8; text-transform: uppercase; } h1 span { background: #e96e57; color: white; font-weight: 500; letter-spacing: 1px; border-radius: 3px; padding: 1em 1.5em; } h1 span:hover { background: #C86456; cursor: pointer; } </style> </head> <body> <h1><span>Join</span> a conference call</h1> <audio autoplay='true' hidden='true' id='musique_concrete' loop> </audio> <audio autoplay='true' hidden='true' onended='audio.play()'> </audio> <script> function Media(count) { this.count = count; this.range(); } Media.prototype = new Array(); Media.prototype.constructor = Media; Media.prototype.range = function() { for (var j = 1; j <= this.count; j++) { this.push(j); } return this; } Media.prototype.sample = function() { var index = Math.floor(Math.random() * this.length); return this.splice(index, 1)[0]; } function Audio(count, element) { Media.call(this, count); this.element = element; } Audio.prototype = new Media(); Audio.prototype.constructor = Audio; Audio.prototype.ref = function() { if (this.length > 0) { return 'audio/' + this.sample() + '.mp3'; } else { this.range(); return this.ref(); } } Audio.prototype.play = function() { this.element.src = audio.ref(); this.element.play(); } function Image(count) { Media.call(this, count); } Image.prototype = new Media(); Image.prototype.constructor = Image; Image.prototype.ref = function() { if (this.length > 0) { return 'url(images/' + this.sample() + '.gif)'; } else { this.range(); return this.ref(); } } Image.prototype.swap = function() { document.body.style.backgroundImage = images.ref(); } var audio = new Audio(15, document.getElementsByTagName('audio')[1]); var images = new Image(15); function fadeOut(element) { var opacity = 1; var timer = setInterval(function () { if (opacity <= 0.001){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = opacity; element.style.filter = 'alpha(opacity=' + opacity * 100 + ")"; opacity -= opacity * 0.1; }, 50); } var join = document.getElementsByTagName('span')[0] join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]); document.getElementById('musique_concrete').src = 'audio/bounce.mp3'; audio.play(); images.swap(); document.getElementsByTagName('audio')[1].addEventListener('ended', function() { audio.play(); images.swap(); }, false); }; </script> </body></html>
<audio autoplay='true' hidden='true' onended='audio.play()'>
function Audio(count, element) { Media.call(this, count);
this.element = element; }
Audio.prototype.ref = function() { if (this.length > 0) { return 'audio/' + this.sample() + '.mp3'; } else { this.range();
Audio.prototype.play = function() { this.element.src = audio.ref();
this.element.play(); }
Image.prototype.swap = function() { document.body.style.backgroundImage = images.ref(); }
var audio = new Audio(15, document.getElementsByTagName('audio')[1]);
document.getElementById('musique_concrete').src = 'audio/bounce.mp3';
images.swap();
document.getElementsByTagName('audio')[1].addEventListener('ended', function() { audio.play();
images.swap(); }, false); }; </script> </body></html>
― Allen (etaeoe), Monday, 16 December 2013 17:53 (twelve years ago)
allen. it works PERFECTLY. you are a miracle worker.
― Karl Malone, Tuesday, 17 December 2013 03:03 (twelve years ago)
this also makes things easier for me in terms of updating it - now i can just upload the audio and image files without having to modify the source code to specify the additional files.
UGH. thank you thank you thank you!
― Karl Malone, Tuesday, 17 December 2013 03:08 (twelve years ago)
from this link - http://stackoverflow.com/questions/3009888/autoplay-audio-files-on-an-ipad-with-html5 - it appears that there was a workaround, but that it no longer works with the newer versions of iOS. apple seems to be making a concerted effort to block autoplay (to save bandwidth apparently).
luckily, most of the site works on my ipad - it still displays the foreground rotating images and audio clips. it doesn't play the backing audio loop (which is important imo because the backing music helps to create the eerie vibe), but i can live with that.
― Karl Malone, Sunday, 22 December 2013 19:02 (twelve years ago)
guess i should have figured this out before launching the site today, but does anyone know how to fix the formatting of the text on iOS devices? it looks like this on iphone:
http://i.imgur.com/98j8o66.jpg
i think this is the relevant code. first, the css:
h1 { font-size: 2em; margin: 0.67em 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; color: #dacdb8; text-transform: uppercase; } h1 span { background: #e96e57; color: white; font-weight: 500; letter-spacing: 1px; border-radius: 3px; padding: 1em 1.5em; } h1 span:hover { background: #C86456; cursor: pointer; }
then in the body:
<h1>unmute your line, then <P> <span>Join</span> a conference call</h1>
― Karl Malone, Thursday, 2 January 2014 18:25 (twelve years ago)
i'm working on it via http://jsfiddle.net/LqMWs/
― Karl Malone, Thursday, 2 January 2014 18:59 (twelve years ago)
Try putting this in the head of your pages html:
<meta name="viewport" content="width=device-width, initial-scale=1">
― Chewshabadoo, Thursday, 2 January 2014 19:29 (twelve years ago)
that was the first thing i tried, but it didn't seem to change anything: http://jsfiddle.net/LqMWs/
it's possible that i didn't do it correctly, though
― Karl Malone, Thursday, 2 January 2014 19:31 (twelve years ago)
Do you have a picture of how you want it to display?
― Chewshabadoo, Thursday, 2 January 2014 19:36 (twelve years ago)
what is that P tag doin in your H1?
― TracerHandVEVO (Tracer Hand), Thursday, 2 January 2014 19:43 (twelve years ago)
If it's just to create a line break, you should use <br /> instead.
― Matt Groening is MY Cousin (Leee), Thursday, 2 January 2014 19:46 (twelve years ago)
well, i basically just want it to look like it already does on a full size monitor: www.conferencecall.biz - one line of text, with "UNMUTE YOUR LINE, THEN" on the left, the "JOIN" button in the middle, and "A CONFERENCE CALL" to the right.
it's just that the text doesn't scale down on smaller devices, which is odd because there's a bunch of CSS in the source code that seems to be intended to scale down for smaller screens.
i don't know! i'll take it out.
― Karl Malone, Thursday, 2 January 2014 19:52 (twelve years ago)
this is the css:
body { margin: 0; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: -moz-box; display: -webkit-box; display: flex; display: -webkit-flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100%; } h1 { font-size: 2em; margin: 0.67em 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; color: #dacdb8; text-transform: uppercase; }
h1 { font-size: 2em; margin: 0.67em 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; color: #dacdb8; text-transform: uppercase; }
it specifies that the height and width are 100%, so i don't understand why it then allows the text to spill over onto two more separate lines. is there a specific "text-size" element that would correct things?
― Karl Malone, Thursday, 2 January 2014 19:59 (twelve years ago)
The height and width scale the body relative to the device, not the size of the font.
You could try something like
<meta name="viewport" content="width=1080">
― Chewshabadoo, Thursday, 2 January 2014 20:11 (twelve years ago)
hmmm, didn't help. thanks for trying, though. i've been trying to figure it out for weeks, to no avail.
i'm wondering if this bit in the <H1> CSS is overriding other changes:
font-size: 2em;
― Karl Malone, Thursday, 2 January 2014 20:16 (twelve years ago)
Hmmm, how about if you set it to something ridiculous like 9999? This should make everything really tiny. If not there may be something odd happening.
Are you testing these on your live site?
― Chewshabadoo, Thursday, 2 January 2014 20:22 (twelve years ago)
yep - not the index.html of course, but under www.conferencecall.biz/alt.html
― Karl Malone, Thursday, 2 January 2014 20:22 (twelve years ago)
ok, i set it to 9999 and it made it so small that i can't see it on my phone. which is a good sign, i suppose!
― Karl Malone, Thursday, 2 January 2014 20:25 (twelve years ago)
x-post
A very quick fix while we find out why the viewport doesn’t seem to work as expected would be to try this at the end of your CSS.
@media screen and (max-width: 800px){ h1 { font-size: 1em; }}
― Chewshabadoo, Thursday, 2 January 2014 20:30 (twelve years ago)
Try 1080 again, and refresh a few times, maybe use some over applications to make sure the cache is cleared.
so 1080 looks like this on my phone:
http://i.imgur.com/urBaBPE.png
i tried the @media fix and it didn't seem to change anything.
― Karl Malone, Thursday, 2 January 2014 20:41 (twelve years ago)
It won’t do if you have force set the viewport as well, because it will only work if the width is under 800.
Either try the @media css rule without the viewport meta tag, or try a larger number in the meta tag, try 1200, and then go higher if not on one line.
― Chewshabadoo, Thursday, 2 January 2014 21:20 (twelve years ago)
the @media css rule without the viewpoint tag looks like this:
http://i.imgur.com/cs6D2lL.png i'll see if i can try adjusting the number in the meta tag
― Karl Malone, Thursday, 2 January 2014 21:29 (twelve years ago)
or try a larger number in the meta tag, try 1200, and then go higher if not on one line.
1400 is the smallest number that puts everything on a single line, and then it looks like this:
http://i.imgur.com/n2330sE.png
which...is an improvement over how it currently looks on iphone, so i'll go with that for now i suppose!
― Karl Malone, Thursday, 2 January 2014 21:38 (twelve years ago)
You could try adding margin-left: 10px to that box to force-center it if that's the concern (haven't seen it on my desktop)
― she started dancing to that (Finefinemusic), Thursday, 2 January 2014 22:38 (twelve years ago)
you lost the linebreak b/c you took out that P tag. you should put in a <br /> where it was
― 1staethyr, Thursday, 2 January 2014 22:49 (twelve years ago)
xpost to ffm - it only has the formatting issue on the iphone, so adding a margin-left: 10px would push it off-center on the desktop version.
i put the <BR> back in but it didn't seem to make a difference.
sigh. i get so frustrated working on code for a few hours - i don't know how some of you do it for a living!
― Karl Malone, Friday, 3 January 2014 00:16 (twelve years ago)
try adding display: block; inside your h1 span {..} section - that may accomplish what you were using the break and paragraph tags to do. Could also add margin: 10px; to that - much less visible on desktop I'd imagine
― she started dancing to that (Finefinemusic), Friday, 3 January 2014 02:05 (twelve years ago)
hmm...i tried the display: block; in the h1 span, but it didn't seem to change anything. thanks though, ffm!
my new main concern is that the backing audio music loop doesn't play on mobile or tablets. my analytics are showing that about 27% of the visitors are using iOS or android. d'oh!
as philip mentioned upthread, i think it's because apple has disabled the use of autoplay on iphones (due to bandwidth concerns). however, since there's a Join button, it should be possible to trigger the backing audio loop since it's user initiated. as usual, i have tried and failed to fix this for hours now.
this section is near the top:
<h1>unmute your line, then </div> <span>Join</span> a conference call</h1> <audio autoplay='true' hidden='true' id='musique_concrete' loop> </audio> <audio autoplay='true' hidden='true' onended='audio.play()'> </audio>
('musique_concrete' is the id given to the backing ambient loop that isn't playing on mobile devices)
then there's this section of code that dictates what happens after the user clicks the Join button:
join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]); document.getElementById('musique_concrete').src = 'https://s3.amazonaws.com/conferencecall.biz/audio/bounce.mp3'; audio.play(); images.swap(); document.getElementsByTagName('audio')[1].addEventListener('ended', function() { audio.play(); images.swap(); }, false);
document.getElementById('musique_concrete').src = 'https://s3.amazonaws.com/conferencecall.biz/audio/bounce.mp3';
images.swap(); }, false);
― Karl Malone, Friday, 3 January 2014 14:44 (twelve years ago)
however, since there's a Join button, it should be possible to trigger the backing audio loop since it's user initiated.
and there's this helpful stackoverflow thread that addresses it:
What this means (in terms of code) is that Javascript's play() and load() methods are inactive until the user initiates playback, unless the play() or load() method is triggered by user action (e.g. a click event).Basically, a user-initiated play button works, but an onLoad="play()" event does not.For example, this would play the movie:<input type="button" value="Play" onclick="document.myMovie.play()">Whereas the following would do nothing on iOS:<body onload="document.myMovie.play()">
Basically, a user-initiated play button works, but an onLoad="play()" event does not.
For example, this would play the movie:
<input type="button" value="Play" onclick="document.myMovie.play()">Whereas the following would do nothing on iOS:
<body onload="document.myMovie.play()">
― Karl Malone, Friday, 3 January 2014 14:46 (twelve years ago)
i guess i'm wondering why i can't just take the autoplay out of the top piece of code, so it looks like this:
<audio hidden='true' id='musique_concrete' loop> </audio> <audio hidden='true' onended='audio.play()'> </audio>
<audio hidden='true' onended='audio.play()'>
shouldn't the 'musique_concrete' loop still play once the user clicks the button?
join.onclick = function() { fadeOut(document.getElementsByTagName('h1')[0]); document.getElementById('musique_concrete').src = 'https://s3.amazonaws.com/conferencecall.biz/audio/bounce.mp3'; <<<THIS LINE audio.play(); images.swap(); document.getElementsByTagName('audio')[1].addEventListener('ended', function() { audio.play(); images.swap(); }, false);
document.getElementById('musique_concrete').src = 'https://s3.amazonaws.com/conferencecall.biz/audio/bounce.mp3'; <<<THIS LINE
in my extremely limited way of thinking about this, the line marked "<<<THIS LINE" should trigger the musique_concrete loop. but when i test it out, the backing loop doesn't play at all. it only plays if the "autoplay" is included in the top <audio> code, even though it's not triggered until the user clicks the button.
i realize i'm making very little sense, sorry. i'm befuddled myself!
― Karl Malone, Friday, 3 January 2014 15:12 (twelve years ago)
Are you still using Dreamweaver? The latest HTML, CSS, and JavaScript is malformed, e.g. Line 142 has an unmatched `</a>`. Regardless, there’s a number of problem that’ll need to be addressed—including using a different method for vertical aligning the `<h1>` element. I can fix this later today.
― Allen (etaeoe), Friday, 3 January 2014 17:19 (twelve years ago)
There’s also an unmatched `</div>` wrecking havoc.
― Allen (etaeoe), Friday, 3 January 2014 17:21 (twelve years ago)
yikes. i'm sure both of those are my own fault. the twitter/facebook/about section at the top was something that should have been really simple, but it took me...a very long time. and i'm sure somewhere in the process i introduced the problems.
― Karl Malone, Friday, 3 January 2014 17:23 (twelve years ago)
Here's a demo of a fix for the positioning problems on mobile:
https://gist.github.com/goodmanio/3f604b6062e2f3f0ab11
― Allen (etaeoe), Friday, 3 January 2014 17:26 (twelve years ago)
I think most of the problems were introduced by the pop up, i.e. "about this .biz."
― Allen (etaeoe), Friday, 3 January 2014 17:27 (twelve years ago)
hope it's ok, allen, but yesterday tim nolan (creator of the awesome cachemonet) messaged me and asked about how to get looping sound files to work on phones. i told him that i had very little to do with the coding (except for messing it up!) and pointed him in your direction.
― Karl Malone, Saturday, 4 January 2014 15:26 (twelve years ago)
ugh, looks like multiple simultaneous audio might be impossible now. my brother-in-law directed me to this:
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
Multiple Simultaneous Audio or Video StreamsCurrently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See “Replacing a Media Source Sequentially” for details.
Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See “Replacing a Media Source Sequentially” for details.
― Karl Malone, Saturday, 4 January 2014 16:46 (twelve years ago)
Nice, my bro-in-law totally helped out with a bunch of stuff, including the formatting problem on mobile/tablet! also he added a subtle little 3d effect to the "JOIN" button so that it presses down when you click on it. he also pointed out that I was pointing to the wrong URL on the facebook share button. Fixed it, and now it's showing that I have 640 shares!
― Karl Malone, Saturday, 4 January 2014 18:32 (twelve years ago)
I made some progress today:
https://www.evernote.com/shard/s23/sh/22e2b286-849c-4c6a-90d9-9ffe0ca82641/1f2018d6a0d6626277f54eea8c4eca14/deep/0/ConferenceCall.biz.png
― Allen (etaeoe), Monday, 6 January 2014 03:24 (twelve years ago)
whoa, that looks pretty awesome!
i'm still not sure what i'm doing wrong with the tweet button code. it's still showing 0 tweets even though there have been probably around 100+ tweets or so
― Karl Malone, Monday, 6 January 2014 04:07 (twelve years ago)
Twitter changed the way you access tweets recentlyish, do you may be using some old code?
― Chewshabadoo, Monday, 6 January 2014 12:46 (twelve years ago)
I used the new code, I believe (https://about.twitter.com/resources/buttons). And just yesterday (after it failed to work for a few days) I added in a few parameters that were supposedly supposed to help (like counturl). almost all of the available troubleshooting for it on twitter's website is a bunch of people asking why the count button won't go up, and a singular twitter employee recommending that people just wait a few days, and then people angrily saying they already tried that.
― Karl Malone, Monday, 6 January 2014 13:59 (twelve years ago)
html is so hardit feels like the latin i don't know
― mustread guy (schlump), Saturday, 18 January 2014 21:27 (twelve years ago)
logical, illuminating, somehow monastic, present but out of reach
HTML comes as naturally to me as breathing.. Now I'm learning JavaScript & C# and feeling that Latin confusion. Anything we can help with?
― she started dancing to that (Finefinemusic), Saturday, 18 January 2014 23:06 (twelve years ago)
this is so reassuring! i don't know. i find learning it so engaging. i took a class at school a while ago & ascended from manipulating it to being able to write in short bursts, to ctrl-tab into a stylesheet & tap out squiggly brackets while frowning judiciously. & the logic of it is so appealing, the sticklebrick nature that rewards effort & arbitrary variation, that stumbles you into solutions. i learned most html i know in tandem with trying to learn French & my html is just so much better. i remember when i first understood the orthographical rule about surrounding a paragraph of speech with an opening quote but not a closing quote if it was continued in the next paragraph, & being so satisfied by the internal logic; you need to introduce speech as what it is, but you don't want to incorrectly suggest that the speech ended when it just broke, or needed formatting. & a lot of html is like that for me, but then it also strays beyond me when it transcends its most basic kinda rootsy precepts: interplay between divs; controlling across browsers; relying on things more complicated than css that aren't self-evident in the thing you wrote, javascript, externally hosted iframes, &c.
i'm kinda hesitant to get into my thing here, just because i think i would be inflicting unnecessary stress on strangers? i think i need to draw a picture of it. to ~broadly outline my woes~, i keep a photo-diary, & i was so pleased a while ago when i realised i could make it scaleable by using percentages instead of fixed pixel values. like it is the simplest language but it works & makes me feel like i am satisfying children with baseball caps skating down the sidewalks squinting nihilistically at their cellphones. but i wanted to expand the thing i was doing before - stretching one very wide jpg across the entire page, with a little white space above & below - into a kind of messier assemblage of content. not just a jpg that i could say width="100%" to, but a couple of jpgs & then a youtube embed & then more pictures. & it just gets so messy, & i revert to trying to use tables, which everybody tells me is just gauche, & then the cells overlap & i don't have clumsy, control-vocab language to locate the stack overflow threads in which other Former Custodians of Now Abandoned Tumblrs have vented their frustration in. ha ha. you know? i could try to problem solve here but i guess more i am trying to just elicit camaraderie with everybody else who feels aphasic looking at something they just wrote.
thank you so much for offering your skills FFM! all of this kinda thing totally reminds me of the semi-utopian nature of this, in which everybody seems to be freely & encouragingly working on this stuff remotely, together, benevolently.
― mustread guy (schlump), Sunday, 19 January 2014 03:28 (twelve years ago)
Had a few irl crises to solve this weekend keeping me from coming back to this thread but I hope to clear those out soon and put my HTML hat back on - I agree that it is tempting to fall back into tables but if you stay strong and committed you can get that euphoric feeling of satisfaction! It's all in careful planning of margins usually but without seeing code it's hard to spitball :)
― she started dancing to that (Finefinemusic), Monday, 20 January 2014 05:07 (twelve years ago)
has this gone viral? i've just had it posted in my facebook feed by a stranger from the outside
― koogs, Tuesday, 28 January 2014 18:31 (twelve years ago)
it's starting to get out there a little - my housemate said her friends were posting about in on facebook yesterday as well
Please help me create ConferenceCall.biz by recording agonized audio snippets
― Karl Malone, Tuesday, 28 January 2014 18:41 (twelve years ago)
this is probably not HTML, but is it possible to determine if a visitor's volume is on mute or not? Ideally I'd like to have a check built into thirtysecondstories.com so that if it notices that your volume is on mute, it displays a message or image telling you to turn it on.
― ♪♫_\o/_♫♪ (Karl Malone), Monday, 12 January 2015 20:40 (eleven years ago)
This says no: [Removed Illegal Link]
― dan m, Monday, 12 January 2015 20:43 (eleven years ago)
For some reason ilx doesn't like that stackoverflow link ¯\_(ツ)_/¯
― dan m, Monday, 12 January 2015 20:44 (eleven years ago)
haha, it's ok, i believe you. i did a decent amount of searching and found nothing, but thought i'd check in here one more time. i wish there was an elegant way to make sure that people had their sound turned on other than a message saying "please turn your sound on." i guess i could always try to be fancy and make a little image that represents turning sound up and have it display for a few seconds at the beginning before fading away.
― ♪♫_\o/_♫♪ (Karl Malone), Monday, 12 January 2015 20:48 (eleven years ago)
The basic answer is that browsers are made this way to avoid letting sites have control over hardware, which makes sense.
― dan m, Monday, 12 January 2015 21:02 (eleven years ago)
it's true, i suppose the security implications would be a little disturbing! thanks!
― ♪♫_\o/_♫♪ (Karl Malone), Monday, 12 January 2015 21:17 (eleven years ago)
script kiddies would have a field day if they could control your machine's audio volumes from the browser
― ∞, Monday, 12 January 2015 22:04 (eleven years ago)
oh, i wasn't trying to control the machine's volume itself, i was just wondering if there was a way to know if a machine was muted. if so, i would then trigger a message saying "turn your volume up fool!", but if it was already up, no message would appear.
― ♪♫_\o/_♫♪ (Karl Malone), Monday, 12 January 2015 22:24 (eleven years ago)
Nah, also I have external speakers where my pc has no way of knowing whether I have the volume dial turned down.
― Drop soap, not bombs (Ste), Monday, 12 January 2015 22:30 (eleven years ago)
Just put up a generic message anyway "Turn your volume up to hear the music" or something
― Drop soap, not bombs (Ste), Monday, 12 January 2015 22:31 (eleven years ago)
have an audio instruction for them to turn off the volume at pageload then a written instruction to turn on the volume after a few seconds and that way you will be 100% sure that everyone is in the same state
― local eire man (darraghmac), Monday, 12 January 2015 22:46 (eleven years ago)
Maybe a gif of Jayz from the Dirt off your Shoulder video extorting people to "turn the music up in those headphones"? I'm always convinced
― she started dancing to that (Finefinemusic), Tuesday, 13 January 2015 18:46 (eleven years ago)
the only solution is to request everyone's personal address and then i'll go around from house to house playing people audio recordings of stories
― ♪♫_\o/_♫♪ (Karl Malone), Tuesday, 13 January 2015 18:56 (eleven years ago)
an excellent career in management awaits you
― ∞, Tuesday, 13 January 2015 19:34 (eleven years ago)