javascript - react中如何判断audio已经记载到可以播放的情况?
本文介绍了javascript - react中如何判断audio已经记载到可以播放的情况?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
准备做一个类似于音乐播放器的东西,
现在做到歌曲搜索出来,然后加到对应的 标签上,
但是不知道怎么判断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已经加载,
因为源是国外的, 网速比较慢。
解决方案
this.audio.addEventListener('canplaythrough', () => {
});
这篇关于javascript - react中如何判断audio已经记载到可以播放的情况?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文