diff --git a/js/hyperaudio-lite.js b/js/hyperaudio-lite.js index f2cb374..1edbf9e 100644 --- a/js/hyperaudio-lite.js +++ b/js/hyperaudio-lite.js @@ -1,5 +1,5 @@ /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */ -/*! Version 2.1.5 */ +/*! Version 2.1.6 */ 'use strict'; @@ -168,12 +168,102 @@ function youtubePlayer(instance) { } } +// Note – The Spotify Player is in beta. +// The API limits us to: +// 1. A seek accuracy of nearest second +// 2. An update frequency of one second (although a workaround is provided) +// 3. Playing a file without previous iteraction will always play from start +// ie – a shared selection will highlight but not start at the start of +// that selection. + +function spotifyPlayer(instance) { + this.currentTime = 0; + this.paused = true; + this.player = null; + + window.onSpotifyIframeApiReady = IFrameAPI => { + + const element = document.getElementById('hyperplayer'); + + const extractEpisodeID = (url) => { + const match = url.match(/episode\/(.+)$/); + return match ? match[1] : null; + } + + const subSample = (sampleInterval) => { + this.currentTime += sampleInterval; + } + + const srcValue = element.getAttribute('src'); + const episodeID = extractEpisodeID(srcValue); + + const options = { + uri: `spotify:episode:${episodeID}`, + } + + const callback = player => { + this.player = player; + player.addListener('playback_update', e => { + if (e.data.isPaused !== true) { + this.currentTime = e.data.position / 1000; + let currentSample = 0; + let totalSample = 0; + let sampleInterval = 0.25; + + while (totalSample < 1){ + currentSample += sampleInterval; + setTimeout(subSample, currentSample*1000, sampleInterval); + totalSample = currentSample + sampleInterval; + } + + instance.preparePlayHead(); + this.paused = false; + } else { + instance.pausePlayHead(); + this.paused = true; + } + }); + + player.addListener('ready', () => { + // With the Spotify API we need to play before we seek. + // Although togglePlay should autoplay it doesn't, + // but lets us prime the playhead. + player.togglePlay(); + instance.checkPlayHead(); + }); + }; + + IFrameAPI.createController(element, options, callback); + } + + this.getTime = () => { + return new Promise((resolve) => { + resolve(this.currentTime); + }); + } + + this.setTime = (seconds) => { + this.player.seek(seconds); + } + + this.play = () => { + this.player.play(); + this.paused = false; + } + + this.pause = () => { + this.player.togglePlay(); + this.paused = true; + } +} + const hyperaudioPlayerOptions = { "native": nativePlayer, "soundcloud": soundcloudPlayer, "youtube": youtubePlayer, "videojs": videojsPlayer, - "vimeo": vimeoPlayer + "vimeo": vimeoPlayer, + "spotify": spotifyPlayer } function hyperaudioPlayer(playerType, instance) { @@ -277,9 +367,11 @@ class HyperaudioLite { this.start = this.hashArray[0]; + //check for URL based start and stop times + if (!isNaN(parseFloat(this.start))) { this.highlightedText = true; - + let indices = this.updateTranscriptVisualState(this.start); let index = indices.currentWordIndex; @@ -626,7 +718,7 @@ class HyperaudioLite { }; updateTranscriptVisualState = (currentTime) => { - + let index = 0; let words = this.wordArr.length - 1; diff --git a/spotify.html b/spotify.html new file mode 100644 index 0000000..ee51bbb --- /dev/null +++ b/spotify.html @@ -0,0 +1,139 @@ + + + + + + + + Spotify Version + + + + + + + + + + +

+

+ +
+

+
+ + + +
+ +
+
+

+ [Ellis] Hello there. This is the trailer for Oh What A Time – a new history podcast presented by me, the proud owner of a degree in history, Ellis James. +

+

+ [Tom] And me, comedian, and history enthusiast – Tom Craine. +

+

+ [Chris] And me graduate of the University of East London, (it's a real university) – Chris Scull. +

+

+ [Tom] Each week, we'll be firing up our time machine heading back in time to tackle a brand new subject. +

+

+ [Chris] From childhood to a life at sea, marriage to fashion, all in an effort to answer the question, was the past as awful as it sounds? +

+

+ [Ellis] Or was a life without mattresses and central heating actually better? +

+

+ [Chris] We've actually recorded quite a few episodes. And the thing that really sticks with me is what we learned about a pig that became really intelligent by claiming to have eaten books. +

+

+ Right. +

+

+ That's the kind of... that's the kind of historical insight that is not getting covered elsewhere. +

+

+ [Tom] We're not afraid to tackle the big subjects. That's what's great about this podcast. +

+

+ [Ellis] There's the bit in, in Short Circuit with Johnny Five is sort of up all night reading encyclopedias and stuff, and just saying input input. It was a pig doing this first 100 and 100 years ago. +

+

+ [Chris] The original Johnny Five.

[Ellis] The original Johnny Five was a pig who ate literature. Exactly. +

+

+

+

+ [Chris] And also, how Vikings went about having a poo.

[Tom] Absolutely. +

+

+ [Chris] Yeah. +

+

+ [Ellis] Yeah. +

+

+ [Tom] Once again, you're not getting this anywhere else. +

+

+ [Chris] Exactly. I mean, they did it in the same way, by to be absolutely clear. +

+

+ [Ellis] Yes. Yeah. They just they just had very, very different sensibilities about what was an wasn't acceptable. But to be honest, I mean, as we've established on the podcast, because we've recorded quite a few now, as Chris said, it was a different time. So that's Oh What A Time. Make sure to subscribe and why not give us 5 stars now on the back of this absolutely amazing trailer. I mean, why wait? +

+

+ [Tom] And if you want to start following the pod on social media, you can find us at Oh What A Time pod on Instagram and Twitter. And if you want to email us, you can do so at hello@ohwhatatime.com. +

+

+ [Chris] So that's oh what a time. The first episode will be out on podcast platforms everywhere on Monday 17th July. So make sure you subscribed. We'll see you then. Bye.

[Ellis] Bye. +

+
+
+ + +
+ + + + + + + + +