Created
January 30, 2021 09:27
-
-
Save sabinM1/005ccb6f8df36e4f5c405c4ab4fbedd2 to your computer and use it in GitHub Desktop.
Simplified version of media-session/audio
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!-- | |
| Copyright 2021 Google Inc. All Rights Reserved. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| --> | |
| <html lang="en"> | |
| <!-- Mirrored from googlechrome.github.io/samples/media-session/audio.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 30 Jan 2021 08:19:05 GMT --> | |
| <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="description" content="Sample illustrating the use of Audio / Media Session."> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Audio / Media Session Sample</title> | |
| <link rel="icon" href="https://googlechrome.github.io/samples/images/favicon.ico"> | |
| <link rel="stylesheet" href="../styles/main.css"> | |
| </head> | |
| <body> | |
| <h1>Audio / Media Session Sample</h1> | |
| <p class="availability"> | |
| Available in <a target="_blank" href="https://www.chromestatus.com/feature/5639924124483584">Chrome 57+</a> | | |
| <a target="_blank" href="https://github.com/googlechrome/samples/blob/gh-pages/media-session/audio.html">View on GitHub</a> | | |
| <a href="index.html">Browse Samples</a> | |
| </p> | |
| <h3>Background</h3> | |
| <p>The <a href="https://developers.google.com/web/updates/2017/02/media-session">Media Session API</a> | |
| lets you customize media notifications by providing metadata information for | |
| the media your web app is playing. It also allows you to handle media related | |
| events such as seeking or track changing which may come from notifications or | |
| media keys.</p> | |
| <p>Credits: Media files are the works of <a href="http://www.wavemage.com/category/music/">Jan Morgenstern</a> and | |
| licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/3.0/">CC BY-NC-ND 3.0</a>.</p> | |
| <button id="playButton">▶ PLAY</button> | |
| <script> | |
| if (/Chrome\/(\d+\.\d+.\d+.\d+)/.test(navigator.userAgent)){ | |
| // Let's log a warning if the sample is not supposed to execute on this | |
| // version of Chrome. | |
| if (57 > parseInt(RegExp.$1)) { | |
| // .setStatus('Warning! Keep in mind this sample has been tested with Chrome ' + 57 + '.'); | |
| } | |
| } | |
| </script> | |
| <script> | |
| if (!('mediaSession' in navigator)) { | |
| // .setStatus('The Media Session API is not yet available. Try Chrome for Android.'); | |
| } | |
| // This prevents unnecessary errors when Media Session API is not available. | |
| navigator.mediaSession = navigator.mediaSession || {}; | |
| navigator.mediaSession.setActionHandler = navigator.mediaSession.setActionHandler || function() {}; | |
| window.MediaMetadata = window.MediaMetadata || function() {}; | |
| // log = ChromeSamples.log; | |
| </script> | |
| <script>let audio = document.createElement('audio'); | |
| let playlist = getAwesomePlaylist(); | |
| let index = 0; | |
| function onPlayButtonClick() { | |
| playAudio(); | |
| } | |
| function playAudio() { | |
| audio.src = playlist[index].src; | |
| audio.play(); | |
| // .then(_ => updateMetadata()); | |
| // .catch(error => console.log(error)); | |
| } | |
| /* Previous Track & Next Track */ | |
| navigator.mediaSession.setActionHandler('previoustrack', function() { | |
| console.log('> User clicked "Previous Track" icon.'); | |
| index = (index - 1 + playlist.length) % playlist.length; | |
| playAudio(); | |
| }); | |
| navigator.mediaSession.setActionHandler('nexttrack', function() { | |
| console.log('> User clicked "Next Track" icon.'); | |
| index = (index + 1) % playlist.length; | |
| playAudio(); | |
| }); | |
| audio.addEventListener('ended', function() { | |
| // Play automatically the next track when audio ends. | |
| index = (index - 1 + playlist.length) % playlist.length; | |
| playAudio(); | |
| }); | |
| /* Seek Backward & Seek Forward */ | |
| let defaultSkipTime = 10; /* Time to skip in seconds by default */ | |
| navigator.mediaSession.setActionHandler('seekbackward', function(event) { | |
| console.console.log('> User clicked "Seek Backward" icon.'); | |
| const skipTime = event.seekOffset || defaultSkipTime; | |
| audio.currentTime = Math.max(audio.currentTime - skipTime, 0); | |
| updatePositionState(); | |
| }); | |
| navigator.mediaSession.setActionHandler('seekforward', function(event) { | |
| console.log('> User clicked "Seek Forward" icon.'); | |
| const skipTime = event.seekOffset || defaultSkipTime; | |
| audio.currentTime = Math.min(audio.currentTime + skipTime, audio.duration); | |
| updatePositionState(); | |
| }); | |
| /* Play & Pause */ | |
| navigator.mediaSession.setActionHandler('play', async function() { | |
| console.log('> User clicked "Play" icon.'); | |
| await audio.play(); | |
| navigator.mediaSession.playbackState = "playing"; | |
| // Do something more than just playing audio... | |
| }); | |
| navigator.mediaSession.setActionHandler('pause', function() { | |
| console.log('> User clicked "Pause" icon.'); | |
| audio.pause(); | |
| navigator.mediaSession.playbackState = "paused"; | |
| // Do something more than just pausing audio... | |
| }); | |
| /* Utils */ | |
| function getAwesomePlaylist() { | |
| const BASE_URL = 'https://storage.googleapis.com/media-session/'; | |
| return [{ | |
| src: BASE_URL + 'sintel/snow-fight.mp3', | |
| title: 'Snow Fight', | |
| artist: 'Jan Morgenstern', | |
| album: 'Sintel', | |
| artwork: [ | |
| { src: BASE_URL + 'sintel/artwork-96.png', sizes: '96x96', type: 'image/png' }, | |
| { src: BASE_URL + 'sintel/artwork-128.png', sizes: '128x128', type: 'image/png' }, | |
| { src: BASE_URL + 'sintel/artwork-192.png', sizes: '192x192', type: 'image/png' }, | |
| { src: BASE_URL + 'sintel/artwork-256.png', sizes: '256x256', type: 'image/png' }, | |
| { src: BASE_URL + 'sintel/artwork-384.png', sizes: '384x384', type: 'image/png' }, | |
| { src: BASE_URL + 'sintel/artwork-512.png', sizes: '512x512', type: 'image/png' }, | |
| ] | |
| }, { | |
| src: BASE_URL + 'big-buck-bunny/prelude.mp3', | |
| title: 'Prelude', | |
| artist: 'Jan Morgenstern', | |
| album: 'Big Buck Bunny', | |
| artwork: [ | |
| { src: BASE_URL + 'big-buck-bunny/artwork-96.png', sizes: '96x96', type: 'image/png' }, | |
| { src: BASE_URL + 'big-buck-bunny/artwork-128.png', sizes: '128x128', type: 'image/png' }, | |
| { src: BASE_URL + 'big-buck-bunny/artwork-192.png', sizes: '192x192', type: 'image/png' }, | |
| { src: BASE_URL + 'big-buck-bunny/artwork-256.png', sizes: '256x256', type: 'image/png' }, | |
| { src: BASE_URL + 'big-buck-bunny/artwork-384.png', sizes: '384x384', type: 'image/png' }, | |
| { src: BASE_URL + 'big-buck-bunny/artwork-512.png', sizes: '512x512', type: 'image/png' }, | |
| ] | |
| }, { | |
| src: BASE_URL + 'elephants-dream/the-wires.mp3', | |
| title: 'The Wires', | |
| artist: 'Jan Morgenstern', | |
| album: 'Elephants Dream', | |
| artwork: [ | |
| { src: BASE_URL + 'elephants-dream/artwork-96.png', sizes: '96x96', type: 'image/png' }, | |
| { src: BASE_URL + 'elephants-dream/artwork-128.png', sizes: '128x128', type: 'image/png' }, | |
| { src: BASE_URL + 'elephants-dream/artwork-192.png', sizes: '192x192', type: 'image/png' }, | |
| { src: BASE_URL + 'elephants-dream/artwork-256.png', sizes: '256x256', type: 'image/png' }, | |
| { src: BASE_URL + 'elephants-dream/artwork-384.png', sizes: '384x384', type: 'image/png' }, | |
| { src: BASE_URL + 'elephants-dream/artwork-512.png', sizes: '512x512', type: 'image/png' }, | |
| ] | |
| }, { | |
| src: BASE_URL + 'caminandes/original-score.mp3', | |
| title: 'Original Score', | |
| artist: 'Jan Morgenstern', | |
| album: 'Caminandes 2: Gran Dillama', | |
| artwork: [ | |
| { src: BASE_URL + 'caminandes/artwork-96.png', sizes: '96x96', type: 'image/png' }, | |
| { src: BASE_URL + 'caminandes/artwork-128.png', sizes: '128x128', type: 'image/png' }, | |
| { src: BASE_URL + 'caminandes/artwork-192.png', sizes: '192x192', type: 'image/png' }, | |
| { src: BASE_URL + 'caminandes/artwork-256.png', sizes: '256x256', type: 'image/png' }, | |
| { src: BASE_URL + 'caminandes/artwork-384.png', sizes: '384x384', type: 'image/png' }, | |
| { src: BASE_URL + 'caminandes/artwork-512.png', sizes: '512x512', type: 'image/png' }, | |
| ] | |
| }]; | |
| } | |
| </script> | |
| <script> | |
| document.querySelector('#playButton').addEventListener('click', onPlayButtonClick); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment