Я создаю веб-аудиоплеер, фактически клон Spotify, как школьный проект. Я работаю над воспроизведением дорожки, нажимая на большой палец списка воспроизведения
Кнопка воспроизведения
Проблема в том, что название дорожки, имя исполнителя и вся другая информация о дорожке выбираются для состояния и обновляются в пользовательском интерфейсе, но audioUrl не обновляется! который отражается на самих треках, поэтому, когда я нажимаю на кнопку на изображении, он воспроизводит предыдущий трек, а не нужный трек, и я не знаю, почему! Я использую Howler для воспроизведения аудио. Это действие кнопки воспроизведения:
contextUri = this.state.context,
uris = [],
offset = 0,
position = 0
) => {
this.putRequest(
"http://localhost:2022/me/player/play?deviceId=" +
this.state.deviceId +
"&queueIndex=0",
{
contextUri: contextUri,
uris: uris,
offset: { position: offset },
positionMs: position,
}
)
.then((response) => {
console.log("new context has fetched");
this.fetchQueue();
let player = this.playerElement.current;
player.fetchPlayback(true);
player.playTrack();
// if (
// response["data"].hasOwnProperty("status") &&
// response["data"]["status"] === "204"
// ) {
// console.log("new context has fetched");
// this.fetchQueue();
// this.playerElement.fetchPlayback();
// this.playerElement.playTrack();
// } else console.log(response);
})
.catch((error) => {
console.log(error);
});
};
, и это действия игрока: получить дорожку:
this.props
.getRequest("http://localhost:2022/me/player")
.then((response) => {
const data = response["data"];
if (!data.hasOwnProperty("status")) {
const track = data["item"];
console.log("url: " + track["audioUrl"]);
this.setState({
audioUrl: track["audioUrl"],
progress: Math.floor(
(data["progressMs"] / track["duartion"]) * 100
),
playing: outPlayer ? true : data["isPlaying"],
current: Number(data["progressMs"] / 60000).toFixed(2),
trackName: track["name"],
artistName: track["artists"][0]["name"],
duration: Number(track["duartion"] / 60000).toFixed(2),
shuffleState: data["shuffleState"],
repeatState: data["repeatState"] === "off" ? false : true,
volume: data["device"]["volumePercent"],
muteState: data["device"]["volumePercent"] === 0 ? true : false,
fetched: true,
trackId: track["_id"],
art: track["artists"][0]["image"],
});
this.props.changePlayingState(data["isPlaying"]);
this.props.fetchQueue("0", track["_id"]);
this.handleSaveToLikedSongs();
}
});
Воспроизвести дорожку:
if (this.state.sound) {
// this.state.sound.pause();
// this.state.sound.seek(0);
this.state.sound.unload();
console.log("unloaded");
}
this.setState({
sound: setupHowler(this.state, this.onPlay, this.onEnd),
});
this.state.sound.play();
if (fromPlay) this.state.sound.seek(this.state.current * 60);
любая помощь?