Add FLAC in ISO-BMFF with MSE Sample

media/flac-in-mp4-for-mse.html

@@ -0,0 +1,24 @@
+---
+feature_name: FLAC in ISO-BMFF with MSE
+chrome_version: 62
+feature_id: 5713014258925568
+check_min_version: true
+---
+
+<h3>Background</h3>
+<p>
+FLAC is a lossless audio coding format, already supported in regular Chrome
+HTML5 playback. Support for FLAC in ISO-BMFF to Chrome HTML5
+Media Source Extensions (MSE) is now added in Chrome 62.
+</p>
+
+<audio controls></audio>
+
+{% include output_helper.html initial_output_content=initial_output_content %}
+
+<script>
+  log = ChromeSamples.log;
+</script>
+
+{% include js_snippet.html filename='flac-in-mp4-for-mse.js' %}
+

media/flac-in-mp4-for-mse.js

@@ -0,0 +1,28 @@
+const audio = document.querySelector('audio');
+
+if (MediaSource.isTypeSupported('audio/mp4; codecs="flac"')) {
+  const mediaSource = new MediaSource();
+  audio.src = URL.createObjectURL(mediaSource);
+
+  mediaSource.addEventListener('sourceopen', function() {
+    URL.revokeObjectURL(audio.src);
+
+    const sourceBuffer = mediaSource.addSourceBuffer('audio/mp4; codecs="flac"');
+
+    log('Fetching audio file...');
+    fetch('https://storage.googleapis.com/media-session/flac.mp4')
+    .then(response => response.arrayBuffer())
+    .then(data => {
+      sourceBuffer.appendBuffer(data);
+      sourceBuffer.addEventListener('updateend', function() {
+        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
+          mediaSource.endOfStream();
+          log('Audio is ready to play!');
+        }
+      });
+    });
+  });
+} else {
+  log('FLAC in ISO-BMFF with MSE is not supported on this platform.');
+}
+