| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #eventslog { |
| font-size: 10px; |
| height: calc(100% - (320px)); |
| overflow-y: scroll; |
| border: 1px solid rgba(147, 128, 108, 0.25); |
| } |
| </style> |
| <script> |
| |
| let playlist = { |
| current: 0, |
| metadata: [ |
| { |
| url: 'video-with-audio.mp4', |
| title: 'Bip Bop With Audio', |
| artist: 'The Bip Bop Authors', |
| album: 'WebKit Greatest Hits', |
| artwork: [ |
| |
| ], |
| }, |
| { |
| url: 'video-without-audio.mp4', |
| title: 'Bip Bop Without Audio', |
| artist: 'The Bip Bop Authors', |
| album: 'WebKit Original Test Content', |
| artwork: [ |
| |
| ], |
| }, |
| ], |
| }; |
| |
| function setMetadata(data) |
| { |
| navigator.mediaSession.metadata = new MediaMetadata(data); |
| postMessage('set metadata') |
| } |
| |
| function joinSession() |
| { |
| let promise = navigator.mediaSession.coordinator.join(); |
| postPromise("join", promise); |
| } |
| |
| function callMethod(method, args) |
| { |
| let code = `navigator.mediaSession.coordinator.${method}(${args})`; |
| let promise = eval(code); |
| postPromise(method, promise); |
| } |
| |
| function setPlaylistMetadata(index) |
| { |
| setMetadata(playlist.metadata[index]); |
| } |
| |
| function clearActionHandlers() |
| { |
| setEmptyActionHandlers([]); |
| } |
| |
| function setEmptyActionHandlers(handlers) |
| { |
| const actions = { |
| 'play' : () => { postMessage('play handler'); }, |
| 'pause' : () => { postMessage('pause handler') }, |
| 'seekto' : (details) => { postMessage('seekto handler') }, |
| 'seekforward' : (details) => { postMessage('seekforward handler') }, |
| 'seekbackward' : (details) => { postMessage('seekbackward handler') }, |
| 'previoustrack' : () => { postMessage('previoustrack handler') }, |
| 'nexttrack' : () => { postMessage('nexttrack handler') }, |
| }; |
| |
| Object.keys(actions).forEach(action => { navigator.mediaSession.setActionHandler(action, null); }); |
| |
| handlers.forEach(handler => { |
| if (!actions[handler]) { |
| log(`asked to register handler for unknown action '${handler}'`); |
| return; |
| } |
| |
| log(`registering '${handler}' handler`); |
| navigator.mediaSession.setActionHandler(handler, actions[handler]); |
| }); |
| } |
| |
| function postMessage(message) |
| { |
| log(`${message}`) |
| if (window.webkit) |
| window.webkit.messageHandlers.testHandler.postMessage(message); |
| } |
| |
| function postEvent(evt) |
| { |
| postMessage(`${evt.type} event`); |
| } |
| |
| async function postPromise(type, promise) |
| { |
| log(`waiting for ${type} promise`); |
| await promise |
| .then( () => { postMessage(`${type} resolved`); } ) |
| .catch( () => { postMessage(`${type} rejected`); } ); |
| log(`${type} promise settled`); |
| } |
| |
| function load() |
| { |
| let src = playlist.metadata[0].url; |
| if (!window.webkit) |
| src = `../WebKitLegacy/ios/${src}`; |
| audio.src = src; |
| audio.load(); |
| } |
| |
| function log(msg) |
| { |
| let eventLog = document.getElementById('eventslog') |
| let note = document.createElement('div'); |
| note.innerHTML = msg; |
| eventLog.insertBefore(note, eventLog.firstChild); |
| } |
| |
| const session = navigator.mediaSession; |
| |
| window.addEventListener("load", evt => { |
| audio = document.getElementsByTagName('audio')[0]; |
| audio.addEventListener('canplaythrough', postEvent); |
| audio.addEventListener('play', postEvent); |
| audio.addEventListener('pause', postEvent); |
| audio.addEventListener('seeked', postEvent); |
| navigator.mediaSession.coordinator.addEventListener('coordinatorstatechange', postEvent); |
| }, false); |
| |
| </script> |
| </head> |
| <body> |
| <audio controls> </audio> |
| <br> |
| <button onclick="setEmptyActionHandlers(['play','pause','seekto'])">Empty Play, Pause, SeekTo</button> |
| <br> |
| <button onclick="setEmptyActionHandlers(['play','pause','seekforward','seekbackward'])">Empty Play, Pause, Seek Forward, Seek Backward</button> |
| <br> |
| <button onclick="load()">Load</button> |
| <br> |
| <button onclick="setPlaylistMetadata(0)">Set Metadata 1</button><button onclick="setPlaylistMetadata(1)">Set Metadata 2</button> |
| <br> |
| <div id='eventslog'></div> |
| </body> |
| </html> |
