Skip to content

Commit b5c4057

Browse files
alexander-heimbuchalexander-heimbuch
committed
feat(live): add liveSync property
1 parent 8165ec0 commit b5c4057

File tree

15 files changed

+330
-162
lines changed

15 files changed

+330
-162
lines changed

‎build/webpack.config.dev.js

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
1-
const path = require('path')
2-
const CopyPlugin = require('copy-webpack-plugin')
1+
const path = require("path");
2+
const CopyPlugin = require("copy-webpack-plugin");
33

44
module.exports = {
5-
mode: 'development',
6-
devtool: 'source-map',
5+
mode: "development",
6+
devtool: "source-map",
77
entry: {
8-
audio: './example/audio.js',
9-
'audio-hls': './example/audio-hls.js',
10-
video: './example/video.js',
11-
'video-hls': './example/video-hls.js',
12-
'audio-connect': './example/audio-connect.js'
8+
audio: "./example/audio.js",
9+
"audio-hls": "./example/audio-hls.js",
10+
"live-hls": "./example/live-hls.js",
11+
live: "./example/live.js",
12+
video: "./example/video.js",
13+
"video-hls": "./example/video-hls.js",
14+
"audio-connect": "./example/audio-connect.js",
1315
},
1416
output: {
15-
filename: './tmp/[name].js'
17+
filename: "./tmp/[name].js",
1618
},
1719
resolve: {
1820
alias: {
19-
'@podlove/html5-audio-driver': path.resolve(__dirname, '..', 'src')
20-
}
21+
"@podlove/html5-audio-driver": path.resolve(__dirname, "..", "src"),
22+
},
2123
},
2224
devServer: {
23-
host: '0.0.0.0',
24-
disableHostCheck: true
25+
host: "0.0.0.0",
26+
disableHostCheck: true,
2527
},
2628
module: {
27-
rules: [{
28-
test: /\.(js)$/,
29-
exclude: /node_modules/
30-
}, {
31-
test: /\.(js)$/,
32-
exclude: /node_modules/,
33-
use: {
34-
loader: 'babel-loader'
35-
}
36-
}]
29+
rules: [
30+
{
31+
test: /\.(js)$/,
32+
exclude: /node_modules/,
33+
use: {
34+
loader: "babel-loader",
35+
},
36+
},
37+
],
3738
},
3839
plugins: [
3940
new CopyPlugin({
4041
patterns: [
41-
path.resolve(__dirname, '..', 'node_modules', 'milligram', 'dist', 'milligram.min.css'),
42-
path.resolve(__dirname, '..', 'node_modules', 'normalize.css', 'normalize.css')
43-
]
44-
})
45-
]
46-
}
42+
path.resolve(
43+
__dirname,
44+
"..",
45+
"node_modules",
46+
"milligram",
47+
"dist",
48+
"milligram.min.css"
49+
),
50+
path.resolve(
51+
__dirname,
52+
"..",
53+
"node_modules",
54+
"normalize.css",
55+
"normalize.css"
56+
),
57+
],
58+
}),
59+
],
60+
};

‎example/audio-connect.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,9 @@ import { log } from './src/console'
1313
const connector = connect.audio()
1414

1515
const load = () => connector.load([{
16-
url: m4a,
17-
mimeType: 'audio/mp4'
18-
}, {
19-
url: mp3,
20-
mimeType: 'audio/mp3'
21-
}, {
22-
url: ogg,
23-
mimeType: 'audio/pgg'
16+
url: 'https://mcdn.br.de/br/hf/b5/master.m3u8',
17+
title: 'HLS Stream',
18+
mimeType: 'application/x-mpegURL'
2419
}])
2520

2621
// actions

‎example/audio.js

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
import 'file-loader?name=index.html!./index.html'
2-
import m4a from 'file-loader!./audio-files/example.m4a'
3-
import mp3 from 'file-loader!./audio-files/example.mp3'
4-
import ogg from 'file-loader!./audio-files/example.ogg'
1+
import "file-loader?name=index.html!./index.html";
2+
import m4a from "file-loader!./audio-files/example.m4a";
3+
import mp3 from "file-loader!./audio-files/example.mp3";
4+
import ogg from "file-loader!./audio-files/example.ogg";
55

6-
import { audio } from '@podlove/html5-audio-driver'
6+
import { audio } from "@podlove/html5-audio-driver";
77

8-
import { registerActions } from './src/actions'
9-
import { registerEvents } from './src/events'
10-
import { registerInputs } from './src/inputs'
11-
import { registerFilters } from './src/filters'
8+
import { registerActions } from "./src/actions";
9+
import { registerEvents } from "./src/events";
10+
import { registerInputs } from "./src/inputs";
11+
import { registerFilters } from "./src/filters";
1212

1313
const myAudio = audio([
14-
// {
15-
// url: m4a,
16-
// mimeType: 'audio/mp4'
17-
// },
18-
{
19-
url: 'https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3',
20-
mimeType: 'audio/mp3'
21-
}
22-
// {
23-
// url: ogg,
24-
// mimeType: 'audio/pgg'
25-
// }
26-
])
14+
{
15+
url: m4a,
16+
mimeType: "audio/mp4",
17+
},
18+
{
19+
url: mp3,
20+
mimeType: "audio/mp3",
21+
},
22+
{
23+
url: ogg,
24+
mimeType: "audio/pgg",
25+
},
26+
]);
2727

28-
registerEvents(myAudio)
29-
registerActions(myAudio)
30-
registerInputs(myAudio)
31-
registerFilters(myAudio)
28+
registerEvents(myAudio);
29+
registerActions(myAudio);
30+
registerInputs(myAudio);
31+
registerFilters(myAudio);

‎example/index.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,17 @@ <h3>Audio Actions</h3>
6161
<label for="volume">Volume</label>
6262
<input type="number" id="volume" placeholder="Volume" min="0" max="1" value="1" step="0.1">
6363
<label for="rate">Rate</label>
64-
<input type="number" id="rate" placeholder="Volume" value="1" min="0" max="4" step="0.1">
64+
<input type="number" id="rate" placeholder="Rate" value="1" min="0" max="4" step="0.1">
6565
</fieldset>
6666

6767
<h3>Progress</h3>
6868
<input id="progress" style="width: 100%" type="range" value="0" min="0" max="1" step="0.01" />
6969

70+
<div>
71+
<button id="backward">-30</button>
72+
<button id="forward">+30</button>
73+
</div>
74+
7075
<h3>Audio Filters</h3>
7176
<button id="mono">mono</button>
7277
<button id="stereo">stereo</button>
@@ -98,6 +103,14 @@ <h3>Audio Filters</h3>
98103
'audio-connect': {
99104
title: 'Audio Connect',
100105
src: 'audio-connect.js'
106+
},
107+
'live-hls': {
108+
title: 'Audio Driver HLS Live',
109+
src: 'live-hls.js'
110+
},
111+
'live': {
112+
title: 'Audio Driver Live',
113+
src: 'live.js'
101114
}
102115
}
103116

‎example/live-hls.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import 'file-loader?name=index.html!./index.html'
2+
3+
import { audio } from '@podlove/html5-audio-driver'
4+
import { attatchStream } from '@podlove/html5-audio-driver/hls'
5+
6+
import { registerActions } from './src/actions'
7+
import { registerEvents } from './src/events'
8+
import { registerInputs } from './src/inputs'
9+
10+
const sources = [{
11+
url: 'https://mcdn.br.de/br/hf/b5/master.m3u8',
12+
title: 'HLS Stream',
13+
mimeType: 'application/x-mpegURL'
14+
}]
15+
16+
const myAudio = attatchStream(audio(sources))
17+
18+
registerEvents(myAudio)
19+
registerActions(myAudio)
20+
registerInputs(myAudio)

‎example/live.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import 'file-loader?name=index.html!./index.html'
2+
3+
import { audio } from '@podlove/html5-audio-driver'
4+
import { attatchStream } from '@podlove/html5-audio-driver/hls'
5+
6+
import { registerActions } from './src/actions'
7+
import { registerEvents } from './src/events'
8+
import { registerInputs } from './src/inputs'
9+
10+
const sources = [{
11+
url: 'https://ndr-ndr2-niedersachsen.cast.addradio.de/ndr/ndr2/niedersachsen/mp3/128/stream.mp3',
12+
mimeType: 'audio/mp3'
13+
}]
14+
15+
const myAudio = attatchStream(audio(sources))
16+
17+
registerEvents(myAudio)
18+
registerActions(myAudio)
19+
registerInputs(myAudio)

‎example/src/actions.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { compose } from 'ramda'
2-
import { actions } from '@podlove/html5-audio-driver'
2+
import { actions, props } from '@podlove/html5-audio-driver'
33

44
// actions
55
export const playButton = document.getElementById('play')
@@ -8,6 +8,8 @@ export const loadButton = document.getElementById('load')
88
export const restartButton = document.getElementById('restart')
99
export const muteButton = document.getElementById('mute')
1010
export const unmuteButton = document.getElementById('unmute')
11+
export const backwardButton = document.getElementById('backward')
12+
export const forwardButton = document.getElementById('forward')
1113

1214
export const registerActions = node => {
1315
const mediaActions = actions(node)
@@ -19,5 +21,7 @@ export const registerActions = node => {
1921
pauseButton.addEventListener('click', mediaActions.pause)
2022
muteButton.addEventListener('click', mediaActions.mute)
2123
unmuteButton.addEventListener('click', mediaActions.unmute)
24+
backwardButton.addEventListener('click', compose(mediaActions.setPlaytime, ({ playtime }) => playtime - 30, () => props(node)))
25+
forwardButton.addEventListener('click', compose(mediaActions.setPlaytime, ({ playtime }) => playtime + 30, () => props(node)))
2226
restartButton.addEventListener('click', compose(mediaActions.play, () => mediaActions.setPlaytime(0), mediaActions.pause))
2327
}

‎example/src/events.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { renderProps } from './dom'
66
import { log } from './console'
77

88
export const registerEvents = node => {
9-
const onEvent = (event) => compose(renderProps(node), log(event))
9+
const onEvent = (event) => compose(renderProps(node))
1010
const mediaEvents = events(node)
1111
renderProps(node)
1212

@@ -24,6 +24,7 @@ export const registerEvents = node => {
2424
mediaEvents.onDurationChange(onEvent('duration changed'))
2525
mediaEvents.onVolumeChange(onEvent('volume changed'))
2626
mediaEvents.onFilterUpdate(onEvent('filter updated'))
27+
mediaEvents.onLiveSyncUpdate(onEvent('livesync updated'))
2728
mediaEvents.onPlaytimeUpdate(value => {
2829
progressBar.value = value / 250
2930
})

‎package-lock.json

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"license": "MIT",
77
"scripts": {
88
"dev": "webpack-dev-server --progress --config build/webpack.config.dev.js",
9-
"clean": "rm -rf dist/ && mkdir -p dist/",
9+
"clean": "rm -rf dist/* && mkdir -p dist/",
1010
"publish:prepare": "npm run clean && cp LICENSE package.json dist/ && npm run build && cp -R src dist",
1111
"build": "webpack -p --progress --config build/webpack.config.build.js",
1212
"test": "node test && NODE_ENV=test webpack --progress --config ./build/webpack.config.test.js && http-server tmp",
@@ -18,7 +18,7 @@
1818
"url": "https://github.com/podlove/html5-audio-driver.git"
1919
},
2020
"dependencies": {
21-
"hls.js": "0.13.2",
21+
"hls.js": "1.0.0-beta.3",
2222
"ramda": "0.24.1"
2323
},
2424
"main": "index.js",

0 commit comments

Comments
 (0)