无法加载 JSON 文件数据作为 mediaElement.js 中参数之一的数组

Unable to load JSON file data as an array for one of the parameter in mediaElement.js

我正在使用 MediaElement.js 库向音频时间轴添加标记。我正在尝试从 JSON 文件中获取数据,将其转换为数组并(未成功)将其用作参数之一。

我的JSON数据如下:

{
    "StartTimeInMin": "0",
    "EndTimeInMin": "60",
    "event": [{
        "EventTimeMin": "4",
        "EventType": "1"
    }, {
        "EventTimeMin": "10",
        "EventType": "2"
    }]
}

也可以从以下位置访问:https://api.myjson.com/bins/y2v0k

我获取数据的代码:

let minuteMarkers = [];

function getJson() {
    fetch("https://api.myjson.com/bins/y2v0k")
        .then(function (res) {
            return res.json();
        })
        .then(function (data) {
            parsingdata = JSON.parse(data);
            console.log(parsingdata);
            jsondata = data.event;
            jsondata.forEach(function (e) {
                minuteMarkers.push(e.EventTimeMin);
                return minuteMarkers;
            });
        })
        .catch(function (err) {
            console.log(err);
        });
}

getJson();

console.log(minuteMarkers);

let player = new MediaElementPlayer("player2", {
    features: [
        "playpause",
        "current",
        "progress",
        "duration",
        "markers",
        "fullscreen"
    ],
    // markers: ["4", "14"], <- it works
    markers: minuteMarkers, // <- This does not work !
    markerColor: "#00FF00",
    markerCallback: function (media, time) {
        alert(time);
    }
});

当我执行 console.log(minuteMarkers) 时,我得到了 [] 作为结果。我期待得到 ["4", "10"].

我能想到的一个问题是:在 "player" 变量运行后,获取正在给我数据。因此在执行 "player" 时它没有 "minuteMarker" 而我没有得到结果。

请求您的帮助以获取数组形式的数据并提供给播放器-> 标记。

谢谢

请记住这是一个异步调用,因此您的代码应该在 promise 中。

例如:

function getJson() {
    fetch("https://api.myjson.com/bins/y2v0k")
        .then(function (res) {
            return res.json();
        })
        .then(function (data) {
            let minuteMarkers = [];

            data.event.forEach(function (item) {
                minuteMarkers.push(item.EventTimeMin);
            });

            createPlayer(minuteMarkers);
        })
        .catch(function (err) {
            console.log(err);
        });
}

function createPlayer(minuteMarkers) {
    let player = new MediaElementPlayer("player2", {
        features: [
            "playpause",
            "current",
            "progress",
            "duration",
            "markers",
            "fullscreen"
        ],
        markers: minuteMarkers,
        markerColor: "#00FF00",
        markerCallback: function (media, time) {
            alert(time);
        }
    });
}

getJson();