<div class="container">
  <div class="iframe-container">
    <iframe id="api-frame"></iframe>
  </div>
  <div class="explainer" id="explainer">
    Play and pause audio by clicking on the annotations. Annotation 1, 2 and 3 have audio linked. The audio elements are hidden with css.
  </div>
  <div class="controls" id="controls" style="visibility: hidden">
    <audio controls id="audio1" loop=true preload width="960" height="540">
      <source src="https://filesamples.com/samples/audio/mp3/sample3.mp3" id="srcMP3" type="audio/mp3">
    </audio>
    <audio controls id="audio2" loop=true preload width="960" height="540">
      <source src="https://filesamples.com/samples/audio/mp3/sample2.mp3" id="srcMP3" type="audio/mp3">
    </audio>
    <audio controls id="audio3" loop=true preload width="960" height="540">
      <source src="https://filesamples.com/samples/audio/mp3/sample1.mp3" id="srcMP3" type="audio/mp3">
    </audio>
  </div>
</div>

html,
body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;

  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: grayscale;
  font-family: Open Sans, sans-serif;
}

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.iframe-container {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
}

.iframe-container > iframe {
  border: 0;
  width: 100%;
  flex: 1;
}

.explainer {
  height: 60px;
  padding: 15px 15px 0 15px;
  background-color: #e2e2e2;
  overflow: auto;
}

.controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  height: 80px;
  padding: 15px 0 0 15px;
  background-color: #f2f2f2;

  overflow: auto;
}

.controls > * {
  margin-right: 15px;
  margin-bottom: 15px;
}

var version = "1.11.0";
var urlid = "14749f029392444d82512146e6f26f3c";

// this array will hold the audio samples
let audiosamples = []

// Add your samples to the array. 
audiosamples.push(document.getElementById('audio1'))
audiosamples.push(document.getElementById('audio2'))
audiosamples.push(document.getElementById('audio3'))

// This function loops over each sample in the array and pauses it, unless
// the sampleID matches the index of the sample in the array
function toggleAudio(sampleID) {
  for (let n = 0; n < audiosamples.length; n++) {
  	if (sampleID === n) {
    	audiosamples[n].play()
    } else {
      audiosamples[n].pause()
    }
  }
}

function actionSkfb() {
  // initialize
  var iframe = document.getElementById("api-frame");
  var client = new window.Sketchfab(version, iframe);

  var error = function () {
    console.error("Sketchfab API error");
  };

  var success = function (api) {
    api.start(function () {    
      api.addEventListener("viewerready", function () {
        // Toggle audio when selecting an annotation.
        // ATTENTION: annotation 1 has the index 0. This is a bit confusing.
        api.addEventListener('annotationSelect', function(index) {
          console.log('Selected annotation', index);
          toggleAudio(index)
        });        
      });
    });
  };
  
  client.init(urlid, {
    success: success,
    error: error,
    ui_stop: 0,
    ui_inspector: 0,
    ui_infos: 0,
    ui_controls: 0,
    scrollwheel: 1,
    ui_watermark: 0
  });
}

actionSkfb();