Merge pull request #6 from podlove/feature/audio-facade

Feature/audio facade

build/webpack.config.build.js

@@ -13,7 +13,8 @@ module.exports = {
     utils: file('utils'),
     hls: file('hls'),
     filters: file('filters'),
-    media: file('media')
+    media: file('media'),
+    connect: file('connect')
   },
   output: {
     path: path.resolve('./dist'),

build/webpack.config.dev.js

@@ -7,7 +7,8 @@ module.exports = {
     audio: './example/audio.js',
     'audio-hls': './example/audio-hls.js',
     video: './example/video.js',
-    'video-hls': './example/video-hls.js'
+    'video-hls': './example/video-hls.js',
+    'audio-connect': './example/audio-connect.js'
   },
   output: {
     filename: './tmp/[name].js'

example/audio-connect.js

@@ -0,0 +1,69 @@
+import { compose, path } from 'ramda'
+import 'file-loader?name=index.html!./index.html'
+import m4a from 'file-loader!./audio-files/example.m4a'
+import mp3 from 'file-loader!./audio-files/example.mp3'
+import ogg from 'file-loader!./audio-files/example.ogg'
+
+import { connect } from '@podlove/html5-audio-driver'
+import { loadButton, playButton, pauseButton, muteButton, unmuteButton, restartButton } from './src/actions'
+import { volumeInput, rateInput } from './src/inputs'
+import { log } from './src/console'
+
+
+const connector = connect.audio()
+
+const load = () => connector.load([{
+  url: m4a,
+  mimeType: 'audio/mp4'
+}, {
+  url: mp3,
+  mimeType: 'audio/mp3'
+}, {
+  url: ogg,
+  mimeType: 'audio/pgg'
+}])
+
+// actions
+loadButton.addEventListener('click', () => load())
+playButton.addEventListener('click', () => connector.actions.play())
+pauseButton.addEventListener('click', () => connector.actions.pause())
+muteButton.addEventListener('click', () => connector.actions.mute())
+unmuteButton.addEventListener('click', () => connector.actions.unmute())
+restartButton.addEventListener('click', compose(() => connector.actions.play(), () => connector.actions.setPlaytime(0), () => connector.actions.pause()))
+
+// inputs
+volumeInput.addEventListener('change', compose(connector.actions.setVolume, path(['target', 'value'])))
+rateInput.addEventListener('change', compose(connector.actions.setRate, path(['target', 'value'])))
+
+// Props
+const renderProps = () => {
+  const element = document.getElementById('props')
+  const playerProperties = connector.state
+
+  while (element.firstChild) {
+    element.removeChild(element.firstChild)
+  }
+
+  Object.keys(playerProperties).map(key => {
+    const propNode = document.createElement('tr')
+    propNode.innerHTML = `<td>${key}</td><td>${playerProperties[key]}</td>`
+    element.appendChild(propNode)
+  })
+}
+
+// Events
+const onEvent = (event) => compose(renderProps, log(event))
+connector.events.onLoaded(onEvent('loaded'))
+connector.events.onLoading(onEvent('loading'))
+connector.events.onBuffering(onEvent('buffering'))
+connector.events.onBufferChange(onEvent('buffer changed'))
+connector.events.onPause(onEvent('paused'))
+connector.events.onPlay(onEvent('playing'))
+connector.events.onPlaytimeUpdate(onEvent('playtime'))
+connector.events.onError(onEvent('error'))
+connector.events.onEnd(onEvent('end'))
+connector.events.onRateChange(onEvent('rate changed'))
+connector.events.onDurationChange(onEvent('duration changed'))
+connector.events.onVolumeChange(onEvent('volume changed'))
+connector.events.onFilterUpdate(onEvent('filter updated'))
+

example/index.html

@@ -91,6 +91,10 @@ <h3>Audio Filters</h3>
           'video-hls': {
             title: 'Video Driver HLS',
             src: 'video-hls.js'
+          },
+          'audio-connect': {
+            title: 'Audio Connect',
+            src: 'audio-connect.js'
           }
         }
 

example/src/actions.js

@@ -2,12 +2,12 @@ import { compose } from 'ramda'
 import { actions } from '@podlove/html5-audio-driver'
 
 // actions
-const playButton = document.getElementById('play')
-const pauseButton = document.getElementById('pause')
-const loadButton = document.getElementById('load')
-const restartButton = document.getElementById('restart')
-const muteButton = document.getElementById('mute')
-const unmuteButton = document.getElementById('unmute')
+export const playButton = document.getElementById('play')
+export const pauseButton = document.getElementById('pause')
+export const loadButton = document.getElementById('load')
+export const restartButton = document.getElementById('restart')
+export const muteButton = document.getElementById('mute')
+export const unmuteButton = document.getElementById('unmute')
 
 export const registerActions = node => {
   const mediaActions = actions(node)

example/src/inputs.js

@@ -1,12 +1,11 @@
 import { compose, path } from 'ramda'
 import { actions } from '@podlove/html5-audio-driver'
 
-const volumeInput = document.getElementById('volume')
-const rateInput = document.getElementById('rate')
+export const volumeInput = document.getElementById('volume')
+export const rateInput = document.getElementById('rate')
 
 export const registerInputs = node => {
   const mediaActions = actions(node)
   volumeInput.addEventListener('change', compose(mediaActions.setVolume, path(['target', 'value'])))
   rateInput.addEventListener('change', compose(mediaActions.setRate, path(['target', 'value'])))
 }
-