react中如何判断audio已经记载到可以播放的情况？

Question

准备做一个类似于音乐播放器的东西，
现在做到歌曲搜索出来，然后加到对应的 标签上，
但是不知道怎么判断audio是否已经加载到可以播放的情况。
代码

playSong: function(song, event) {
         // Get a bigger image
        var artworkUrl = song.artwork_url;
        var artwork = artworkUrl ? artworkUrl.replace("large", "t500x500") : "https://s3-us-west-2.amazonaws.com/s.cdpn.io/166133/stratus-art.jpg";

        // Apply the album art as the background image
        document.getElementById("2AlbumArtImg").src= artwork;

        // Set title
        document.getElementById("song-title").innerHTML = song.title;
        document.getElementById("song-singer").innerHTML = song.user.username;
        document.getElementById("song-album").innerHTML = "专辑名称暂无";

        // Set music src
        var audio = document.querySelector('audio');
        audio.src = song.stream_url + "?client_id=" + this.props.soundCloudId;
        
        // 这里不知道怎么写？？？？
        audio.addEventListener("oncanplay", function(){
            audio.play();
            this.props.hideOverlay(); // 这个方法是关闭搜索页，显示首页
        });
    },

问题就是 我在代码中// 这里不知道怎么写？？？？ 不知道怎么判断audio已经加载，
因为源是国外的， 网速比较慢。

Answer 1

this.audio.addEventListener('canplaythrough', () => {
     
    });