webplayer seems to play but no sound comes out

eumel19900 commented 6 years ago

Hi,

Steps to reproduce:

I used (copied) this example code for my player. I am just using the web-playback as spotify-connect target for another player using Spotify's REST-API.

Expected behaviour:

The web-playback should play the tracks like other spotify connect devices

Actual behaviour:

Sometimes (I would say every second attempt) this doesn't work. It wont play any sound, but I never get any error. I got no errors in the '*_error'-Callbacks the Example registered via player.addListener() and I also got no errors via Spotify's REST-API. In addition my REST-Client polls the Web API for status updates and it lookes like the track is playing; even the progress_ms field is incrementing each polling request.

I am using Chrome under Windows.

How can I fix this?

Thanks in advance

Greetings Eumel

arirawr commented 6 years ago

Hey @eumel19900, thanks for the report. Could you please include the code you're using to play music?

eumel19900 commented 6 years ago

Hey @arirawr,

At first, I am sry for my late answere. It is a free time project for me. it's a quick and dirty adjusted version of the sample

<!DOCTYPE html>
<html>
<head>
  <title>pySpotifyPlayer - Webplayer</title>
</head>
<body>
  <h1>Spotify Webplayer</h1>
  <div id="playerDiv">
    <p id="trackName"></p>
    <p id="albumName"></p>
    <p id="interpretName"></p>
    <img id="itemImage" src="" height="640" width="480">
  </div>

  <div id="logDiv">
  </div>

  <script src="https://sdk.scdn.co/spotify-player.js"></script>
  <script>
    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = 'BQAGiPk_7WUL2Ij1tonM-Tg3zaVxOcYgs0v3ofSKjdpgq5cVlVtsXcDxuKplvJll1swu8c7FxbmqB4lUFwhkKcPl0xnqwov3KHjQyC_gyGObhVJ8q90NOCHLXrGiiXiZpqWawaYDXGB65t_zec1pdCeT1fLGwvKX6-5FbkfNCIlgANny';
      const player = new Spotify.Player({
        name: 'pySpotifyPlayer',
        getOAuthToken: cb => { cb(token); }
      });

      // Error handling
      player.addListener('initialization_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("initialization_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });
      player.addListener('authentication_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("authentication_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });
      player.addListener('account_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("account_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
       });
      player.addListener('playback_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("playback_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });

      // Playback status updates
      player.addListener('player_state_changed', state => {
          var para = document.createElement("p");
          var node = document.createTextNode("player_state_changed: " + JSON.stringify(state));

          document.getElementById("trackName").innerHTML = "Track: " + state.track_window.current_track.name;
          document.getElementById("albumName").innerHTML = "Album: " + state.track_window.current_track.album.name;
          document.getElementById("interpretName").innerHTML = "Interpret: " + state.track_window.current_track.artists[0].name;
          document.getElementById("itemImage").src = state.track_window.current_track.album.images[0].url;

          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
       });

      // Ready
      player.addListener('ready', ({ device_id }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("Device is ready");
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });

      // Not Ready
      player.addListener('not_ready', ({ device_id }) => {
        var para = document.createElement("p");
          var node = document.createTextNode("Device has gone offline");
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });

      // Connect to the player!
      player.connect();
    };
  </script>
</body>
</html>

I am using this API for controling the webplayer

eumel19900 commented 6 years ago

This may sound stupid... but it seems to work every time, when open the developer console at first in the browser...

arirawr commented 6 years ago

Hey @eumel19900, thanks for the extra info! It looks like you have a hardcoded token in there. Do you have a method implemented for getting a token? Access tokens only last one hour, and it's possible that your token expires when you try to play.

eumel19900 commented 6 years ago

no.. the html will be generated. it is always the current access token.

arirawr commented 6 years ago

Hey @eumel19900 - I've got your code running and it works fine to connect to the player. The code you sent doesn't include a call to start playing music, could you please also show how you're doing that?

eumel19900 commented 6 years ago

hi as i said above i use the spotify rest api to control this player

the rest of my Software is written in python and c++

in Addition i launch this html/js player in chrome via selenium

https://developer.spotify.com/documentation/web-api/reference/player/

greetings

arirawr commented 6 years ago

I tried using the Connect Web API to control the player with your code above, and wasn't able to replicate your issue.

Are you using the device_id of the playback SDK player when you call /v1/me/player/play? If you don't pass a device ID, it will start playback on the most recently active device, which may not be the SDK player. Documentation here: https://developer.spotify.com/documentation/web-api/reference/player/start-a-users-playback/

eumel19900 commented 6 years ago

ok. thank you for your help.

yes i am using this api and i am passing the correct id.

after that i am polling the playback state via rest api. which tells me that my Webplayer is playing (i get the status, an incrementing duration_ms field and in addition when i open spotify i can see the seek bar moving and my spotify connect target being selected)

but no sound comes out. if no sound comes i have to restart my webplayer and try it again.

arirawr commented 6 years ago

It sounds like this may be a bug with Selenium. If you run the code directly in Chrome without using selenium, can you reproduce this behaviour?

eumel19900 commented 6 years ago

Hi, sry again for my late response.

Yes I can reproduce this behaviour directly with chrome.

I opened the generated HTML file (which was freshly generated with the current access token) directly in Chrome. Then I opened Spotify where I selected the "pySpotifyPlayer"-Device. I needed multiple attempts to get the device activated. When it was activated successfully I tried to play a song in spotify... spotify looked like it would play the song... but it didn't make any sound. I tried this multiple times; round about every second attempt worked.

One remark: in case there is no sound, also the speaker symbol in the chrome tab is missing.

This is the complete generated HTML/JS-Code I used.

<!DOCTYPE html>
<html>
<head>
  <title>pySpotifyPlayer - Webplayer</title>
</head>
<body>
  <h1>Spotify Webplayer</h1>
  <div id="playerDiv">
    <p id="trackName"></p>
    <p id="albumName"></p>
    <p id="interpretName"></p>
    <img id="itemImage" src="" height="640" width="480">
  </div>

  <div id="logDiv">
  </div>

  <script src="https://sdk.scdn.co/spotify-player.js"></script>
  <script>
    window.onSpotifyWebPlaybackSDKReady = () => {
      const token = 'BQCg00laI1iecy-vSU9fBPvba1Mpu7PypEK6fo5b5S-M3brA_mSivWlmplw1kUQCKX8NFACODZ1XbAMHn-HOrvYFsAoq3j1oDZF1CqI4CBHL4mZdwO8U6_HUnimUUyACmNHVLZVSzw_k09knq_EzfHXpvD71jNlFeoigIG54YdB7Q6D7';
      const player = new Spotify.Player({
        name: 'pySpotifyPlayer',
        getOAuthToken: cb => { cb(token); }
      });

      // Error handling
      player.addListener('initialization_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("initialization_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });
      player.addListener('authentication_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("authentication_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });
      player.addListener('account_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("account_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
       });
      player.addListener('playback_error', ({ message }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("playback_error: " + message);
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });

      // Playback status updates
      player.addListener('player_state_changed', state => {
          var para = document.createElement("p");
          var node = document.createTextNode("player_state_changed: " + JSON.stringify(state));

          document.getElementById("trackName").innerHTML = "Track: " + state.track_window.current_track.name;
          document.getElementById("albumName").innerHTML = "Album: " + state.track_window.current_track.album.name;
          document.getElementById("interpretName").innerHTML = "Interpret: " + state.track_window.current_track.artists[0].name;
          document.getElementById("itemImage").src = state.track_window.current_track.album.images[0].url;

          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
       });

      // Ready
      player.addListener('ready', ({ device_id }) => {
          var para = document.createElement("p");
          var node = document.createTextNode("Device is ready");
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });

      // Not Ready
      player.addListener('not_ready', ({ device_id }) => {
        var para = document.createElement("p");
          var node = document.createTextNode("Device has gone offline");
          para.appendChild(node);
          document.getElementById("logDiv").appendChild(para);
      });

      // Connect to the player!
      player.connect();
    };
  </script>
</body>
</html>

eumel19900 commented 6 years ago

Hi, I fixed this by switching to firefox.

remimi commented 5 years ago

I have the same exact issue and i don't understand why. My player is in my device list on spotify but no sound come out of it. And in fact it works on Firefox and Opera but not on Safari and Chrome. This issue appears just yesterday (April 29th 2019).

If someone know a better answer than switching browser.

tobika commented 5 years ago

@remimi looks like the same problem I also had, the solution is in this issue :) https://github.com/spotify/web-playback-sdk/issues/75#issuecomment-487325589

remimi commented 5 years ago

Oh thanks a lot ! It works just fine. I'd never could think of that.

spotify / web-playback-sdk