<audio src="https://assets.codepen.io/4358584/Anitek_-_Carry_On.mp3" controls loop></audio>

audio {
  margin-top: 100px;
  margin-left: 100px;
}

const audio = document.querySelector('audio');

//array of mp3 srcs in the album order
const srcs = [
  'https://assets.codepen.io/4358584/Anitek_-_Komorebi.mp3',
  'https://assets.codepen.io/4358584/Anitek_-_Carry_On.mp3',
  'https://assets.codepen.io/4358584/Anitek_-_Wood_Note.mp3'
];

//array of song titles in the album order
const titles = [
  'Komorebi',
  'Carry On',
  'Wood Note'
]

if ( 'mediaSession' in navigator ) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Carry On',
		artist: 'Anitek',
		album: 'MainStay',
		artwork: [
      { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '96x96', type: 'image/png' },
			{ src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '128x128', type: 'image/png' },
			 { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '192x192', type: 'image/png' },
			 { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '256x256', type: 'image/png' },
			 { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '384x384', type: 'image/png' },
			 { src: 'https://assets.codepen.io/4358584/1.300.jpg', sizes: '512x512', type: 'image/png' }
    ]
  });

  navigator.mediaSession.setActionHandler('pause', () => {
    audio.pause();
  });
  navigator.mediaSession.setActionHandler('play', () => {
    audio.play();
  });
  navigator.mediaSession.setActionHandler('seekbackward', (details) => {
    audio.currentTime = audio.currentTime - (details.seekOffset || 10);
  });
  navigator.mediaSession.setActionHandler('seekforward', (details) => {
    audio.currentTime = audio.currentTime + (details.seekOffset || 10);
  });
  navigator.mediaSession.setActionHandler('previoustrack', () => {
    //find the index of the audio src in our srcs array to know what src to set next
    const index = srcs.indexOf(audio.src);
    
    //if the current track is not the first, set the src and corresponding title to that of the previous track of the current track
    if (index !== 0) {
      audio.src = srcs[index - 1];
      navigator.mediaSession.metadata.title = titles[index - 1];
    }
    
    //else set the src and title to the last in the arrays because the current track was the first in the album
    else {
      audio.src = srcs[2];
      navigator.mediaSession.metadata.title = titles[2];
    }
    
    //play the previous track
    audio.play();
  });
  navigator.mediaSession.setActionHandler('nexttrack', () => {
    //find the index of the audio src in our srcs array to know what src to set next
    const index = srcs.indexOf(audio.src);
    
    //if the current track is not the last, set the src and corresponding title to that of the next track of the current track
    if (index !== 2) {
      audio.src = srcs[index + 1];
      navigator.mediaSession.metadata.title = titles[index + 1];
    }
    
    //else set the src and title to the first in the arrays because the current track was the last in the album
    else {
      audio.src = srcs[0];
      navigator.mediaSession.metadata.title = titles[0];
    }
    
    //play the next track
    audio.play();
  });
}