I found this API with fieldrecordings of birdsongs. The audiofile of the recording is a link like this: “file”: “https://xeno-canto.org/544454/download”, which downloads the audiofile when clicked.
I made a class to instance objects with the data that I need, as well as a html string that creates a button for that bird that should play a recording of the birdsong when clicked.

I’m struggling to let the audiofile play on click. It always gives me a different error. The latest error is this one: Uncaught SyntaxError: Unexpected end of input (at (index):1:15). But when i click it, it refers to a jsfile i didn’t make? so i’m very confused.

I have this as html in the class:

export default class Bird {
    constructor(date, lat, lng, name, rec) {
        this._date = date;
        this._lat = lat;
        this._lng = lng;
        this._en = name;
        this._file = rec;
    }

    get HTMLstring() {
        return `<button class="oneBird" value="sound" onclick="playRecording("${this._file}")">${this._en}</button></br>`;
    }

and this in the general index.js file:

'import Bird from "./Bird.js";

let birdList = [];

function init() {
    fetch(`https://xeno-canto.org/api/2/recordings?query=cnt:belgium`)
        .then(function (response) {
            return response.json();
        })
        .then(function (json) {
            //console.log(json.recordings);
            json.recordings.forEach(function (recording) {
                const bird = new Bird(recording.date, recording.lat, recording.lng, recording.en, recording.file);
                //console.log(birdInstance);
                birdList.push(bird);
                //console.log(birdList);
                render(bird.HTMLstring);
            });
        });
}

function playRecording(rec) {
    const audio = new Audio();
    audio.source = rec;
    audio.play();
}

function render(content) {
    document.querySelector("#allBirds-list").innerHTML += content;
}

init();