successful ytmnd playback

tv/index.html

@@ -21,6 +21,6 @@ body.tile{background-position: top left; background-repeat: repeat;}
 <script src='js/zoomtext.js'></script>
 <script src='js/ytmnd.js'></script>
 <script>
-  ytmnd.init(['typogra','klasky'])
+  ytmnd.init('alas CarlWinslows Coach directory dnmyt klasky ROY4L typogra'.split(' '))
 </script>
 </html>

tv/js/audio.js

@@ -2,9 +2,10 @@ var audio = (function(){
 
   var audio = {}
 
-  var context = new webkitAudioContext()
+  var context = new AudioContext()
   var source
   var current = ""
+  var timeout
   
   var bufs = {}
   var sources = {}
@@ -12,7 +13,7 @@ var audio = (function(){
   audio.preload = function(site, loader){
     loader.register(site.domain + "_sound")
     var request = new XMLHttpRequest()
-    request.open('GET', url, true) 
+    request.open('GET', site.sound_url, true) 
     request.responseType = 'arraybuffer'
     request.onload = function() {
       context.decodeAudioData(request.response, function(buf) {
@@ -20,30 +21,81 @@ var audio = (function(){
         loader.ready(site.domain + "_sound")
       }, function () { console.error('The request failed.') } )
     }
+    request.onerror = function() {
+      ytmnd.error()
+    }
     request.send()
   }
   
-  audio.play = function(domain){
+  audio.loaded = function(domain){
+    return (domain in bufs)
+  }
+
+  audio.make_source = function(domain){
     var buf = bufs[domain]    
     var source = context.createBufferSource()
     source.connect(context.destination)
     source.buffer = buf
-    source.start(0)
     
     sources[domain] = sources[domain] || []
     sources[domain].push(source)
+    return source
   }
   
-/*
+  audio.play = function(domain){
+    console.log("play", domain)
+    
+    current = domain
+    
+    var source
+    
+    var startTime = context.currentTime
+    var delay
+    
+    clearTimeout(timeout);
+
     (function loop(){
       if (source) {
-        source.start(0)
+        var dt = context.currentTime - startTime
-        setTimeout(loop, source.buffer.duration * 1000 - (source.buffer.duration < 2 ? 0 : 60) )
+        console.log("got a source", dt, delay)
+        if (dt > 20) {
+          ytmnd.next()
         }
         else {
-        setTimeout(loop, 0)
+          timeout = setTimeout(loop, delay)
+          source.start(0)
+          source.started = true
+          source = audio.make_source(domain)
+        }
+      }
+      else {
+        timeout = setTimeout(loop, 0)
+        source = audio.make_source(domain)
+        delay = source.buffer.duration * 1000 - (source.buffer.duration < 2 ? 0 : 60)
       }
     })()
-*/
+    
+  }
+  
+  audio.stop_current = function(){
+    audio.stop(current)
+    current = ""
+  }
+  
+  audio.stop = function(domain){
+    if (! sources[domain]) return
+
+    clearTimeout(timeout)
+
+    sources[domain].forEach(function(source){
+      if (source.started) {
+        source.stop(0)
+      }
+    })
+    sources[domain] = []
+    delete bufs[domain]
+  }
+  
+  return audio
 
 })()

tv/js/vendor/util.js

@@ -4,3 +4,15 @@ function randint(n){ return rand(n)|0 }
 function randrange(a,b){ return a + rand(b-a) }
 function randsign(){ return random() >= 0.5 ? -1 : 1 }
 function choice(a){ return a[randint(a.length)] }
+
+function toArray(a){ return Array.prototype.slice.call(a) }
+
+function shuffle(a){
+  for (var i = a.length; i > 0; i--){
+    var r = randint(i)
+    var swap = a[i-1]
+    a[i-1] = a[r]
+    a[r] = swap
+  }
+  return a
+}

tv/js/ytmnd.js

@@ -1,17 +1,22 @@
-(function(){
+var ytmnd = (function(){
 
   var ytmnd = {}
   var sites = []
+  var loaded = {}
+  var index = 0
+  var play_immediately = true
   
-  var base_href = 'https://ltho.s3.amazonaws.com/ytmnd/'
+  var base_href = 'https://ltho.s3.amazonaws.com/ytmnd'
   
   ytmnd.init = function(names){
     var loader = new Loader(ytmnd.ready)
     loader.register('init')
     names.forEach(function(name){
       loader.register(name)
-      fetch(name + '.json').then(function(rows){
+      fetch("users/" + name + '.json').then(function(response){
-        sites = sites.concat(rows)
+        return response.json()
+      }).then(function(json){
+        sites = sites.concat(json)
         loader.ready(name)
       })
     })
@@ -20,6 +25,7 @@
   
   ytmnd.ready = function(){
     shuffle(sites)
+    ytmnd.play_index(index)
   }
 
   ytmnd.preload = function(site){
@@ -27,30 +33,60 @@
     site.sound_url = base_href + "/" + site.username + "/" + site.domain + "." + site.sound_type
 
     var loader = new Loader (function(){
+      loaded[site.domain] = site
+      if (next_domain == site.domain) {
+        ytmnd.play(site)
+      }
     })
     loader.register('init')
     loader.preloadImage( site.image_url )
-    audio.preload( loader, site.sound_url )
+    audio.preload( site, loader )
     loader.ready('init')
   }
 
+  ytmnd.play_index = function(index){
+    var site = sites[index]
+    if (loaded[site.domain]) {
+      ytmnd.play(site)
+    }
+    else {
+      next_domain = site.domain
+      ytmnd.preload(site)
+    }
+  }
+    
   ytmnd.play = function(site){
     document.querySelector("title").innerHTML = site.title
     document.body.style.backgroundColor = site.bgcolor
+    document.body.style.backgroundImage = "url(" + site.image_url + ")"
     document.body.className = site.placement
+    audio.play(site.domain)
     zoomtext.render(site)
   }
   
   ytmnd.stop = function(){
+    var site = sites[index]
+    loaded[site.domain] = false
+    audio.stop(site.domain)
+    zoomtext.empty()
   }
   
   ytmnd.back = function(){
+    ytmnd.stop()
+    index = (index-1) % sites.length
+    ytmnd.play_index(index)
+    setTimeout(function(){
+      ytmnd.preload_index((index-1 + sites.length) % sites.length)
+    }, 1000)
   }
 
   ytmnd.next = function(){
-  }
+    ytmnd.stop()
-
+    index = (index+1) % sites.length
-  ytmnd.loop = function(){
+    ytmnd.play_index(index)
+    setTimeout(function(){
+      ytmnd.preload_index((index+1) % sites.length)
+    }, 1000)
   }
 
   return ytmnd
@@ -67,10 +103,10 @@
 //     'placement': placement,
 //     'zoom_text': zoom_text,
     'image': domain + "." + gif_type,
-    'sound': domain + "." + wav_type,
     'image_type': gif_type,
-    'sound_type': wav_type,
     'image_origin': image_origin,
-    'sound_origin': sound_origin,
+//     'sound': domain + "." + wav_type,
+//     'sound_type': wav_type,
+//     'sound_origin': sound_origin,
   }
 */

tv/js/zoomtext.js

@@ -2,29 +2,29 @@ var zoomtext = (function(){
 
   var zoomtext = {}
 
-  var el = document.querySelctor("#zoomtext")
+  var el = document.querySelector("#zoom_text")
 
   zoomtext.empty = function(){
     el.innerHTML = ""
   }
   
   zoomtext.render = function(site){
-    if (site.zoom_text.line_1.length == 0) {
+    if (! site.zoom_text.line_1) {
       return zoomtext.empty()
     }
 
     var text = ytmnd_info['site']['zoom_text']
 
     var offset = 100, rows = ""
-    if ("line_3" in zoom_text and zoom_text["line_3"].length > 0) {
+    if ("line_3" in zoom_text && zoom_text["line_3"].length > 0) {
       rows += zoomtext.add_row( zoom_text['line_3'], offset, 500 )
       offset += 50
     }
-    if ("line_2" in zoom_text and zoom_text["line_2"].length > 0) {
+    if ("line_2" in zoom_text && zoom_text["line_2"].length > 0) {
       rows += zoomtext.add_row( zoom_text['line_2'], offset, 250 )
       offset += 50
     }
-    if ("line_1" in zoom_text and zoom_text["line_1"].length > 0) {
+    if ("line_1" in zoom_text && zoom_text["line_1"].length > 0) {
       rows += zoomtext.add_row( zoom_text['line_1'], offset, 500 )
     }