Государство не меняет ревуна - PullRequest
0 голосов
/ 12 апреля 2020

Я создаю веб-аудиоплеер, фактически клон 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);

любая помощь?

...