Display song's metadata in page title (browser tab)?

I would label my coding skills as intermediate thus what I am asking may or may not be simple or obvious (I wouldn't know the difference). Also I sincerely thank any and everyone who gives this even an ounce of attention.

My objective is to grab raw song metadata from another server (in which I am a client of) via the jsonp and ajax method. Once I successfully obtain the metadata (Artist, Title & album), I then would like to display it in my website’s page title (please see pics below). The reason I would like to do this is because from what I could gather via an extensive and worn out research, it seems that most Bluetooth Audio devices are reading the metadata from the page title (browser tab): Google Music playing in browser BT Audio player

What I would love to do seems like it should be simple to do, yet I cannot figure away to display "Artist, Title and Album" in my browser like Spotify, Youtube or Google Music does.

My code below is able to pull the raw data, convert it using jsonp and I can successfully push only ONE element from the raw data (IE 'title') by placing it as an ID element. However, how can I push all three (Artist, Title & Album) to the page title?

    <!DOCTYPE html>
<html 
    lang=en
    dir="ltr"
    class="mobile-web-player"
>

<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      
<script type="text/javascript">      
         function update(metadataObj) {
            if (metadataObj && metadataObj.m_Item2) {
               
               var title = document.getElementById('title');
               title.innerHTML = metadataObj.m_Item2.Title;
               
               var artist = document.getElementById('artist');
               artist.innerHTML = 'by ' +   metadataObj.m_Item2.Artist;

               var album = document.getElementById('album');
               album.innerHTML = metadataObj.m_Item2.Album + ' ';
              
            }
         }         
</script>
      
      <script type="text/javascript">
            var stationID = 'X123';
            var apiToken = 'X12345';
            // refresh MetaData every 5 seconds
         function fetchMetadata(stationID, apiToken) {            
            $.ajax({
               type: 'get',
               cache: false,
               url: "https://listen.samcloud.com/webapi/station/X123/history/npe?token=X12345&callback=update&format=json",
               //async: true,
               datatype: 'jsonp',
            });
         }
         fetchMetadata(stationID, apiToken);
         window.setInterval(function() {
            fetchMetadata(stationID, apiToken);
         }, 5000);
      </script>

<!-- I can successfully send the song's title to my page title via <title id> method -->
<title id="title">My Radio Station</title>

</head>

<body>
</body>

</html>

Solution

In your update() function you can call document.title to set the new tab title instead of setting the <title> tag. For example:

function update(metadataObj) {
  if (metadataObj && metadataObj.m_Item2) {

     var title = document.getElementById('title');
     var artist = document.getElementById('artist');
     var album = document.getElementById('album');
     // If you are using es6
     document.title = `Playing ${title} from ${artist} - ${album}`;
     // If not using es6
     // document.title = 'Playing '+ title + ' from '+ artist +' - album';
  }
}