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