From 85664432489d7771eab15aa892fd9607f09b2134 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Tue, 14 Nov 2023 16:44:25 +0100 Subject: [PATCH 1/4] basic functionality --- js/hyperaudio-lite.js | 89 ++++++++++++++++++++- spotify.html | 175 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 262 insertions(+), 2 deletions(-) create mode 100644 spotify.html diff --git a/js/hyperaudio-lite.js b/js/hyperaudio-lite.js index f2cb374..e88bbfe 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,88 @@ function youtubePlayer(instance) { } } +function spotifyPlayer(instance) { + this.currentTime = 0; + this.paused = true; + this.player = null; + + this.getTime = () => { + return new Promise((resolve) => { + console.log(this.currentTime); + resolve(this.currentTime); + }); + } + + window.onSpotifyIframeApiReady = IFrameAPI => { + + const element = document.getElementById('hyperplayer'); + + const srcValue = element.getAttribute('src'); + const episodeID = this.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; + setTimeout(this.subSample, 250); + setTimeout(this.subSample, 500); + setTimeout(this.subSample, 750); + instance.preparePlayHead(); + this.paused = false; + } else { + instance.pausePlayHead(); + this.paused = true; + } + }); + + player.addListener('ready', () => { + instance.checkPlayHead(); + }); + }; + + IFrameAPI.createController(element, options, callback); + } + + this.subSample = () => { + this.currentTime += 0.25; + } + + this.setTime = (seconds) => { + console.log("spotify seek"); + this.player.seek(seconds); + } + + this.play = () => { + console.log("spotify play"); + this.player.play(); + this.paused = false; + } + + this.pause = () => { + console.log("spotify pause"); + this.player.play(); + this.player.togglePlay(); + this.paused = true; + } + + this.extractEpisodeID = (url) => { + const match = url.match(/episode\/(.+)$/); + return match ? match[1] : null; + } +} + const hyperaudioPlayerOptions = { "native": nativePlayer, "soundcloud": soundcloudPlayer, "youtube": youtubePlayer, "videojs": videojsPlayer, - "vimeo": vimeoPlayer + "vimeo": vimeoPlayer, + "spotify": spotifyPlayer } function hyperaudioPlayer(playerType, instance) { @@ -469,6 +545,8 @@ class HyperaudioLite { (async (instance) => { instance.currentTime = await instance.myPlayer.getTime(); + //console.log("instance.currentTime"); + //console.log(instance.currentTime); if (instance.highlightedText === true) { instance.currentTime = instance.start; @@ -528,6 +606,11 @@ class HyperaudioLite { let interval = 0; + //console.log("check status"); + + //console.log(this.myPlayer.paused); + //console.log(this.currentTime); + if (this.myPlayer.paused === false) { if (this.end && parseInt(this.end) < parseInt(this.currentTime)) { @@ -626,6 +709,8 @@ class HyperaudioLite { }; updateTranscriptVisualState = (currentTime) => { + + //console.log(currentTime); let index = 0; let words = this.wordArr.length - 1; diff --git a/spotify.html b/spotify.html new file mode 100644 index 0000000..6b9650b --- /dev/null +++ b/spotify.html @@ -0,0 +1,175 @@ + + + + + + + + Spotify Version + + + + + + + + + + +

+

+ +
+

+
+ + + +
+ +
+
+

+ [speaker-0] Hey, everyone, and welcome to Live At Spotify, the podcast, where we bring you behind the scenes of what it's like to work and learn at Spotify. +

+

+ I'm your host, Tilo Seguero. And in this episode, we're gonna talk about women in Engineering. +

+

+ Engineering still continues to be a male dominated field, and many women find it challenging to not only access education, but also to navigate their career thoughts once they enter the industry. +

+

+ +

+

+ [speaker-1] I didn't started out saying to myself, oh, I wanted the energy gear. I don't even think growing up on who anybody was interested in. Where is that work? +

+

+ I got into engineering very late in life. +

+

+ I was a stay at home mom. I raised my son. +

+

+ And then, before doing that I was, in a PhD program for physics that I dropped out and then, Grand Marie, and half kids, and I raised my son. And then I decided to go back to school. +

+

+ I wanted to do something more tangible this time. And so I did some research and end up deciding to study electrical Engineering. And that's how I got into engineering. +

+

+ +

+

+ [speaker-2] And I think the reason I ended up here is because I, when I chose it, I didn't know what it was. +

+

+ And the math part of it incentivized me to go for it because I was like, this is my strong suit. And I do like people and like, I'll try it. And I think that if I had known how technical it was or that it was labeled more like that, I might have not gone for it. And I'm really happy that I did, and I didn't stop myself from choosing this journey. +

+

+ +

+

+ [speaker-0] So today, we're gonna be exploring the journeys of 2 incredible women from our end team in New York, and they are here not only to give us a glimpse of their parts to Spotify, but also to share some advice for women looking to enter the world of tech Engineering. +

+

+ +

+

+ [speaker-1] Hi. I'm Adele Lukbo. I'm in staff engineers, Spotify. +

+

+ I'm based in New York. I work for the platform this year. +

+

+ +

+

+ [speaker-2] Hi. I'm Sasha Holstanias. I'm about an engineer working in the personalization mission. I work on the podcast recommendations, and I'm located in New York. +

+

+ +

+

+ [speaker-0] Thank you so much for being with us here today, Adele and Sasha. I'm so excited to be chatting with both of you today especially on this topic of women in engineering. How are you both feeling? +

+

+ [speaker-2] Good. Thank you for having me. Fine. +

+

+ [speaker-1] Thank you for having us here. +

+

+ [speaker-0] So, Adele, you're supporting the platform mission and Sasha here with the personalization mission. +

+

+ Right? Can you both tell us a little bit more about what these missions are all about? +

+

+ +

+

+ [speaker-2] Yeah. +

+

+ Sure. +

+

+ So personalization, we work with, like, making sure that the recommendations that we serve users, both on, like, music and podcasts, are tailored to their individual taste. So this is like a pretty big mission that will work on different areas and all together, like, make sure that that experience is serving that specific user what they wanna consume. +

+

+ +

+

+ [speaker-0] Thanks, Sasha. What about the platform mission, Nada? +

+

+ [speaker-1] The platform mission at Spotify is the department that, focus more on the infrastructure, we are beyond the same. We don't see palpable things from, platform mission, from the customer point of view. So we take care of things related to runtime environment of our software, the resources, security. +

+

+ I worked with a tribe that focuses on the infrastructure. So in my driveway, run things related to run down environment, storage, And, sometime we also work on thing really developer experience, and that's what I'm +

+
+
+ +
+ + + + + + + + + From 5f45d99d144517cb142ef5f7d3257606563e965b Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 15 Nov 2023 19:11:00 +0100 Subject: [PATCH 2/4] tweaks --- js/hyperaudio-lite.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/js/hyperaudio-lite.js b/js/hyperaudio-lite.js index e88bbfe..7b4b6c4 100644 --- a/js/hyperaudio-lite.js +++ b/js/hyperaudio-lite.js @@ -196,9 +196,16 @@ function spotifyPlayer(instance) { player.addListener('playback_update', e => { if (e.data.isPaused !== true) { this.currentTime = e.data.position / 1000; - setTimeout(this.subSample, 250); - setTimeout(this.subSample, 500); - setTimeout(this.subSample, 750); + let currentSample = 0; + let totalSample = 0; + let sampleInterval = 0.25; + + while (totalSample < 1){ + currentSample += sampleInterval; + setTimeout(this.subSample, currentSample*1000, sampleInterval); + totalSample = currentSample + sampleInterval; + } + instance.preparePlayHead(); this.paused = false; } else { @@ -215,8 +222,8 @@ function spotifyPlayer(instance) { IFrameAPI.createController(element, options, callback); } - this.subSample = () => { - this.currentTime += 0.25; + this.subSample = (sampleInterval) => { + this.currentTime += sampleInterval; } this.setTime = (seconds) => { From c82be177bfc5890b4d6d0f235ff7ae75ff247c56 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Wed, 15 Nov 2023 19:55:04 +0100 Subject: [PATCH 3/4] play before seek --- js/hyperaudio-lite.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/js/hyperaudio-lite.js b/js/hyperaudio-lite.js index 7b4b6c4..7ef9bcd 100644 --- a/js/hyperaudio-lite.js +++ b/js/hyperaudio-lite.js @@ -168,6 +168,13 @@ 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. Play will always + function spotifyPlayer(instance) { this.currentTime = 0; this.paused = true; @@ -175,7 +182,6 @@ function spotifyPlayer(instance) { this.getTime = () => { return new Promise((resolve) => { - console.log(this.currentTime); resolve(this.currentTime); }); } @@ -215,6 +221,9 @@ function spotifyPlayer(instance) { }); player.addListener('ready', () => { + // With the Spotify API we need to play before we seek. + // Although togglePlay should autoplay it doesn't. + player.togglePlay(); instance.checkPlayHead(); }); }; @@ -227,19 +236,17 @@ function spotifyPlayer(instance) { } this.setTime = (seconds) => { - console.log("spotify seek"); + console.log("setTime"); + console.log(seconds); this.player.seek(seconds); } this.play = () => { - console.log("spotify play"); this.player.play(); this.paused = false; } this.pause = () => { - console.log("spotify pause"); - this.player.play(); this.player.togglePlay(); this.paused = true; } @@ -360,6 +367,8 @@ class HyperaudioLite { this.start = this.hashArray[0]; + //check for URL based start and stop times + if (!isNaN(parseFloat(this.start))) { this.highlightedText = true; @@ -552,8 +561,6 @@ class HyperaudioLite { (async (instance) => { instance.currentTime = await instance.myPlayer.getTime(); - //console.log("instance.currentTime"); - //console.log(instance.currentTime); if (instance.highlightedText === true) { instance.currentTime = instance.start; @@ -613,11 +620,6 @@ class HyperaudioLite { let interval = 0; - //console.log("check status"); - - //console.log(this.myPlayer.paused); - //console.log(this.currentTime); - if (this.myPlayer.paused === false) { if (this.end && parseInt(this.end) < parseInt(this.currentTime)) { @@ -717,8 +719,6 @@ class HyperaudioLite { updateTranscriptVisualState = (currentTime) => { - //console.log(currentTime); - let index = 0; let words = this.wordArr.length - 1; From a572d68ae341b1c8b270d61d2386b4c9e68cb3b8 Mon Sep 17 00:00:00 2001 From: Mark Boas Date: Thu, 16 Nov 2023 13:12:40 +0100 Subject: [PATCH 4/4] tidy up --- js/hyperaudio-lite.js | 42 +++++++++++------------ spotify.html | 80 ++++++++++++------------------------------- 2 files changed, 43 insertions(+), 79 deletions(-) diff --git a/js/hyperaudio-lite.js b/js/hyperaudio-lite.js index 7ef9bcd..1edbf9e 100644 --- a/js/hyperaudio-lite.js +++ b/js/hyperaudio-lite.js @@ -168,30 +168,34 @@ 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. Play will always +// 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; - this.getTime = () => { - return new Promise((resolve) => { - resolve(this.currentTime); - }); - } - 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 = this.extractEpisodeID(srcValue); + const episodeID = extractEpisodeID(srcValue); const options = { uri: `spotify:episode:${episodeID}`, @@ -208,7 +212,7 @@ function spotifyPlayer(instance) { while (totalSample < 1){ currentSample += sampleInterval; - setTimeout(this.subSample, currentSample*1000, sampleInterval); + setTimeout(subSample, currentSample*1000, sampleInterval); totalSample = currentSample + sampleInterval; } @@ -222,7 +226,8 @@ function spotifyPlayer(instance) { player.addListener('ready', () => { // With the Spotify API we need to play before we seek. - // Although togglePlay should autoplay it doesn't. + // Although togglePlay should autoplay it doesn't, + // but lets us prime the playhead. player.togglePlay(); instance.checkPlayHead(); }); @@ -231,13 +236,13 @@ function spotifyPlayer(instance) { IFrameAPI.createController(element, options, callback); } - this.subSample = (sampleInterval) => { - this.currentTime += sampleInterval; + this.getTime = () => { + return new Promise((resolve) => { + resolve(this.currentTime); + }); } this.setTime = (seconds) => { - console.log("setTime"); - console.log(seconds); this.player.seek(seconds); } @@ -250,11 +255,6 @@ function spotifyPlayer(instance) { this.player.togglePlay(); this.paused = true; } - - this.extractEpisodeID = (url) => { - const match = url.match(/episode\/(.+)$/); - return match ? match[1] : null; - } } const hyperaudioPlayerOptions = { @@ -371,7 +371,7 @@ class HyperaudioLite { if (!isNaN(parseFloat(this.start))) { this.highlightedText = true; - + let indices = this.updateTranscriptVisualState(this.start); let index = indices.currentWordIndex; diff --git a/spotify.html b/spotify.html index 6b9650b..ee51bbb 100644 --- a/spotify.html +++ b/spotify.html @@ -37,7 +37,7 @@

@@ -49,107 +49,71 @@

- [speaker-0] Hey, everyone, and welcome to Live At Spotify, the podcast, where we bring you behind the scenes of what it's like to work and learn at Spotify. + [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.

- I'm your host, Tilo Seguero. And in this episode, we're gonna talk about women in Engineering. + [Tom] And me, comedian, and history enthusiast – Tom Craine.

- Engineering still continues to be a male dominated field, and many women find it challenging to not only access education, but also to navigate their career thoughts once they enter the industry. + [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.

- [speaker-1] I didn't started out saying to myself, oh, I wanted the energy gear. I don't even think growing up on who anybody was interested in. Where is that work? + [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?

- I got into engineering very late in life. + [Ellis] Or was a life without mattresses and central heating actually better?

- I was a stay at home mom. I raised my son. + [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.

- And then, before doing that I was, in a PhD program for physics that I dropped out and then, Grand Marie, and half kids, and I raised my son. And then I decided to go back to school. + Right.

- I wanted to do something more tangible this time. And so I did some research and end up deciding to study electrical Engineering. And that's how I got into engineering. + 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.

- [speaker-2] And I think the reason I ended up here is because I, when I chose it, I didn't know what it was. + [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.

- And the math part of it incentivized me to go for it because I was like, this is my strong suit. And I do like people and like, I'll try it. And I think that if I had known how technical it was or that it was labeled more like that, I might have not gone for it. And I'm really happy that I did, and I didn't stop myself from choosing this journey. + [Chris] The original Johnny Five.

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

-

- [speaker-0] So today, we're gonna be exploring the journeys of 2 incredible women from our end team in New York, and they are here not only to give us a glimpse of their parts to Spotify, but also to share some advice for women looking to enter the world of tech Engineering. + [Chris] And also, how Vikings went about having a poo.

[Tom] Absolutely.

- + [Chris] Yeah.

- [speaker-1] Hi. I'm Adele Lukbo. I'm in staff engineers, Spotify. + [Ellis] Yeah.

- I'm based in New York. I work for the platform this year. + [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.

- [speaker-2] Hi. I'm Sasha Holstanias. I'm about an engineer working in the personalization mission. I work on the podcast recommendations, and I'm located in New York. + [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.

- [speaker-0] Thank you so much for being with us here today, Adele and Sasha. I'm so excited to be chatting with both of you today especially on this topic of women in engineering. How are you both feeling? -

-

- [speaker-2] Good. Thank you for having me. Fine. -

-

- [speaker-1] Thank you for having us here. -

-

- [speaker-0] So, Adele, you're supporting the platform mission and Sasha here with the personalization mission. -

-

- Right? Can you both tell us a little bit more about what these missions are all about? -

-

- -

-

- [speaker-2] Yeah. -

-

- Sure. -

-

- So personalization, we work with, like, making sure that the recommendations that we serve users, both on, like, music and podcasts, are tailored to their individual taste. So this is like a pretty big mission that will work on different areas and all together, like, make sure that that experience is serving that specific user what they wanna consume. -

-

- -

-

- [speaker-0] Thanks, Sasha. What about the platform mission, Nada? -

-

- [speaker-1] The platform mission at Spotify is the department that, focus more on the infrastructure, we are beyond the same. We don't see palpable things from, platform mission, from the customer point of view. So we take care of things related to runtime environment of our software, the resources, security. -

-

- I worked with a tribe that focuses on the infrastructure. So in my driveway, run things related to run down environment, storage, And, sometime we also work on thing really developer experience, and that's what I'm + [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.

+