example/example.css

@@ -54,3 +54,7 @@ body {
     margin: 0;
     padding: 0;
 }
+
+.audio iframe {
+    height: 0;
+}

example/example.js

@@ -1,6 +1,7 @@
 var slides = [],
     slideData = [],
     current = 0,
+    activeAudio,
     timeout;
 
 
@@ -14,6 +15,9 @@ function init() {
         if (data.video && data.video.length) {
             data.embed = init_embed(data)
         }
+        if (data.audio) {
+            data.audioEmbed = init_audio_embed(data)
+        }
     })
     go(0)
 }
@@ -55,6 +59,12 @@ function start(idx) {
     } else if (data.video && data.video.length) {
         start_video(data)
     }
+    if (data.audioContainer) { // if there is an audio container, we always stop current audio
+        reset_active_audio();
+    }
+    if (data.audio) {
+        start_audio(data)
+    }
 }
 
 function stop(idx) {
@@ -65,6 +75,9 @@ function stop(idx) {
     } else if (data.video && data.video.length) {
         reset_video(data)
     }
+    if (data.audio && !data.audioContinue) {
+        reset_audio(data)
+    }
 }
 
 function load_urls(dataset) {
@@ -89,6 +102,13 @@ function load_slide(slide) {
             data.zooms = data.video.map(url => url.split('/').pop().split('#')[0].split(',').map(a => Math.round(a)))
         }
     }
+    var audio = slide.querySelector('.audio')
+    if (audio) {
+        data.audio = audio.dataset.url // audio does not need to be an array
+        data.audioContainer = audio
+        console.log('continue', audio.dataset.continue)
+        data.audioContinue = !!audio.dataset.continue
+    }
     return data
 }
 
@@ -110,6 +130,14 @@ function init_embed(data) {
     return embed;
 }
 
+function init_audio_embed(data) {
+    return new PandoraEmbed({
+        id: 'slide-audio-' + data.idx,
+        url: data.audio,
+        container: data.audioContainer 
+    })
+}
+
 window.addEventListener('blur', function(){
     setTimeout(function(){
         // using the 'setTimout' to let the event pass the run loop
@@ -149,6 +177,13 @@ function start_video(data) {
     })
 }
 
+function start_audio(data) {
+    data.audioEmbed.postMessage('options', {
+        'paused': false
+    })
+    activeAudio = data
+}
+
 function reset_video(data) {
     data.embed.postMessage('options', {
         'paused': true,
@@ -156,6 +191,20 @@ function reset_video(data) {
     })
 }
 
+function reset_audio(data) {
+    data.audioEmbed.postMessage('options', {
+        'paused': true,
+        'position': 0 //FIXME: figure correct audio reset
+    })
+    activeAudio = null;
+}
+
+function reset_active_audio() {
+    if (activeAudio) {
+        reset_audio(activeAudio)
+    }
+}
+
 document.addEventListener('keydown', function(event) {
     if (event.key == 'ArrowRight') {
         next()

example/index.html

@@ -3,13 +3,14 @@
 <link type="text/css" href="example.css" rel="stylesheet" />
 <div class="base">
 </div>
-<div class="slide" data-duration="5">
+<div class="slide" data-duration="10">
     <div class="title">FROM JANTA COLONY TO JANTA COLONY</div>
 </div>
-<div class="slide" data-duration="5">
+<div class="slide" data-duration="10">
     <div class="title">
         At first, three stories from the year 1950 in Bombay
     </div>
+    <div class="audio" data-continue="true" data-url="https://pad.ma/BVF/editor/F#embed"></div>
 </div>
 <div class="slide" data-duration="10">
     <div class="title">
@@ -24,6 +25,7 @@
          data-url_0="https://pad.ma/documents/AFL/0,0,6580,3763#embed"
          data-url_1="https://pad.ma/documents/AFL/1568,1461,3352,2401#embed"
          ></div>
+    <div class="audio"></div> <!-- signal to stop playing audio -->
 </div>
 <div class="slide" data-duration="10">
     <div class="title">
@@ -37,6 +39,7 @@
 <div class="slide" data-duration="15">
     <div class="video" data-url_0="https://pad.ma/BVF/editor/F#embed"
         ></div>
+
 </div>
 <div class="slide" data-duration="15">
     <div class="video" data-url_0="https://indiancine.ma/AKDP/editor/BFR#embed"