Open sabjorn opened 3 years ago
emcniece
commented
3 years ago It's possible for there to be more than one linked data script on a page - if you're going to use the script/type element selector like that, it may be wise to perform some additional checks to confirm that the resulting parsed object is what you expect it to be.
I'm not sure how many audio elements are present on the target pages, but it might be a bit easier to scope a selector knowing the DOM as well as you do.
sabjorn
commented
3 years ago fair point. on the page I've been looking at, it's the only one. However, there are some reasonable checks that could be done.
Additionally, if I eventually build out a cache for these waveforms, there is a dateModified attribute from this data that could be used to invalidate the cache.
sabjorn
commented
3 years ago track links are actually available with this:
let album_data = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerText)
var track_number = 2;
var url = album_data.track.itemListElement[0].item.additionalProperty[track_number].valuethere is probably a better way to parse this (since relying on the index order of some arrays is not likely too smart).
With this info several things are possible:
1) playlist (Fetch can be used to get this data from an album's page)
2) pre-loading waveforms
sabjorn
commented
3 years ago additionally, preloading the waveform could also allow for storing the downloaded audio and caching that. This would be a respectful thing to do since then multiple downloads of the file do not happen (and so Bandcamp will be happier).
Example:
sabjorn
commented
3 years ago the page can be fetched from another page like this: https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/
sabjorn
commented
2 years ago const fetch = require('node-fetch');
const jsdom = require("jsdom");
fetch("https://halfpastvibe.bandcamp.com/album/stonks-market").then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
const dom = new jsdom.JSDOM(html);
var div = JSON.parse(dom.window.document.querySelector('script[type="application/ld+json"]').innerHTML);
console.log(div);
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
let section = fetch("https://halfpastvibe.bandcamp.com/track/strong-disagreement-about-the-quality-of-the-beat")
.then(response => response.text())
.then(text => {
const parser = new DOMParser();
const htmlDocument = parser.parseFromString(text, "text/html");
const section = JSON.parse(htmlDocument.documentElement.querySelector('script[type="application/ld+json"]').innerText);
return section;
})frig. it looks like BC might have removed the mp3 src from this data! e.g.
{
"value": "https://t4.bcbits.com/stream/213906695805bd1580d52099d4e4c2f2/mp3-128/3907461273?p=0&ts=1613221074&t=0061592332e4c785ad520bac02a0bb92e29edcec&token=1613221074_9ec236532eec0f9af14863bbe6820ac2f516033e",
"name": "file_mp3-128",
"@type": "PropertyValue"
},might re-visit in the future as part of playlists but caching locally makes more sense in the short term (as will be done in the playlists feature). I also can't really think of a good way to manage pre-load -- as in, how do you do it without wasting peoples' bandwidth.
ideally, in the future, we can have a distributed DB that allows users to just get this data without pulling the whole audio file.
sabjorn
commented
1 year ago re-opening because it looks like we can just provide the audio to <audio> after we grab it with fetch: https://stackoverflow.com/questions/14908838/loading-an-audio-buffer-and-play-it-using-the-audio-tag/58832311#58832311
It turns out that the Ids for tracks are available on the player page in a
application/ld+jsonas show here this can be accessed with:
which results in this:
using this, the waveform could be generated on page load for all tracks (or, possible some subset) and then the waveform loaded on track play.
additionally, there is a different location where the audio stream can be accessed that uses the Bandcamp domain (this would remove the need for the extra domain privilege in the manifest). This url can be found by inspecting the
audioelement on a user's page when listening to a track.