add media session api example (#25)

collab-project · Feb 15, 2017 · 4d1bf6f · 4d1bf6f
1 parent c6cb097
commit 4d1bf6f
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 0 deletions.
diff --git a/examples/media-session.html b/examples/media-session.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Wavesurfer Media Session Plugin for Video.js Example</title>
+
+  <link href="../bower_components/video.js/dist/video-js.min.css" rel="stylesheet">
+  <link href="css/style.css" rel="stylesheet">
+
+  <script src="../bower_components/video.js/dist/video.min.js"></script>
+  <script src="../bower_components/wavesurfer.js/dist/wavesurfer.min.js"></script>
+  <script src="../src/js/videojs.wavesurfer.js"></script>
+
+  <style>
+  /* change player background color */
+  #myAudio {
+      background-color: #FFEEFF;
+  }
+  </style>
+
+</head>
+<body>
+
+<audio id="myAudio" class="video-js vjs-default-skin"></audio>
+
+<script>
+var player = videojs('myAudio',
+{
+    controls: true,
+    autoplay: true,
+    loop: false,
+    width: 600,
+    height: 300,
+    plugins: {
+        wavesurfer: {
+            src: 'media/hal.wav',
+            msDisplayMax: 10,
+            debug: true,
+            waveColor: 'grey',
+            progressColor: 'black',
+            cursorColor: 'black',
+            hideScrollbar: true,
+            metadata: {
+                title: 'HAL 9000',
+                artist: 'Douglas Rain',
+                album: '2001: A Space Odyssey',
+                artwork: [
+                    {src: 'img/hal-9000-96x96.png',   sizes: '96x96',   type: 'image/png'},
+                    {src: 'img/hal-9000-128x128.png', sizes: '128x128', type: 'image/png'},
+                    {src: 'img/hal-9000-192x192.png', sizes: '192x192', type: 'image/png'},
+                    {src: 'img/hal-9000-256x256.png', sizes: '256x256', type: 'image/png'},
+                    {src: 'img/hal-9000-384x384.png', sizes: '384x384', type: 'image/png'},
+                    {src: 'img/hal-9000-512x512.png', sizes: '512x512', type: 'image/png'},
+                ]
+            }
+        }
+    }
+});
+
+// error handling
+player.on('error', function(error)
+{
+    console.warn(error);
+});
+</script>
+
+</body>
+</html>
diff --git a/src/js/videojs.wavesurfer.js b/src/js/videojs.wavesurfer.js
@@ -71,6 +71,22 @@
                 }
             }
 
+            // media session api
+            if ('mediaSession' in navigator)
+            {
+                var metadata = this.options_.options.metadata;
+                console.log('metadata', metadata);
+
+                navigator.mediaSession.metadata = new MediaMetadata(metadata);
+
+                /*
+                navigator.mediaSession.setActionHandler('play', function() {});
+                navigator.mediaSession.setActionHandler('pause', function() {});
+                navigator.mediaSession.setActionHandler('seekbackward', function() {});
+                navigator.mediaSession.setActionHandler('seekforward', function() {});
+                */
+            }
+
             // wait until player ui is ready
             this.player().one('ready', this.setupUI.bind(this));
         },