1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<!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>
|
