-1

Edit: Spotify posts to an endpoint with the data. Any approach still welcome if you manage to get this to work


Basically I want to change the song progress on spotify web (open.spotify.com) programatically / from the console. This however proved to be harder than I initially thought.

This is the HTML where the song progressbar is located. It hosts the visible element and a hidden input element which is a range.

<div class="pn5V0OzovI9p6b8nWq8p gglUjikTBtMzCZFgSmpS">
  <div
    class="encore-text encore-text-marginal encore-internal-color-text-subdued IPbBrI6yF4zhaizFmrg6"
    data-encore-id="text"
    data-testid="playback-position"
  >
    0:00
  </div>
  <div class="B1vgcMXBqOxgMxXh5j1f">
    <div
      class="p1ULRzPc4bD8eQ4T_wyp DFtdzavKSbEhwKYkPTa6 ZqlJ1uWjMeen9ye7Y7GC"
      data-testid="playback-progressbar"
    >
      <label class="hidden-visually"
        >Change progress<input
          type="range"
          min="0"
          max="210040"
          step="5000"
          aria-valuetext="0:00/3:30"
          value="0"
      /></label>
      <div
        class="TywOcKZEqNynWecCiATc"
        data-testid="progress-bar"
        style="--progress-bar-transform: 0%; --progress-bar-duration: 1000ms"
      >
        <div class="NoOAOv6U6vtqj_ybS1Cd" data-testid="progress-bar-background">
          <div class="w699O0LgQRghXyl3bs9u">
            <div class="epWhU7hHGktzlO_dop6z"></div>
          </div>
          <div class="Vis45PPawTyED7Lt2_LI"></div>
        </div>
        <div style="width: 100%"></div>
      </div>
    </div>
  </div>
  <div
    class="encore-text encore-text-marginal encore-internal-color-text-subdued kQqIrFPM5PjMWb5qUS56 DSdahCi0SDG37V9ZmsGO"
    data-encore-id="text"
    data-testid="playback-duration"
    data-test-position="0"
  >
    -3:30
  </div>
</div>

However I soon came to realize, that changing the range.value property, did not do anything. I tried to also modify the progressbar, adding a .click() but nothing seems to work.

Is there a way to modify the song position from javascript/the console? Any hacky approach is accepted. You can also add an id to the range elements if needed for your example.

Anything is welcome except clicking/dragging the bar myself :D

4
  • From what I can gleam, this is VERY hard to do - at least for me. So I inspected the element. I went to the sources panel -> event listener break points -> media -> clicked play and clicked pause. Checked the element that was being used... it was a video element that no longer exists. Don't ask me how they play audio from a video element that no longer exists. I have no clue.
    – Shmack
    Commented Jul 8 at 20:06
  • Also worth noting that I tried to "click()" on the pause-play button, set the value, dispatch a change event, then "click()" on the pause-play button again. Didn't work, however it could work with a different event, like oninput.
    – Shmack
    Commented Jul 8 at 20:21
  • @Shmack Yes, this is very hard to do. I soon realized that even posting via xhr to that endpoint doesn't work. It's probably some black magic DRM voodoo. I'll just close this / vote to close since people seem to hate this question for no reason.. Commented Jul 9 at 12:39
  • I’m voting to close this question because people don't like this question Commented Jul 9 at 12:40

0

Browse other questions tagged or ask your own question.