mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp synced 2024-11-23 00:34:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Webpack example with lazy loading butterchurn and presets

Browse Source
This commit is contained in:
jberg 2019-03-19 08:31:22 -07:00 committed by Jordan Eldredge
parent b816b38e12
commit 037b10fd0b
4 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/webpackLazyLoad/README.md Normal file
View File

@ -0,0 +1,17 @@
# Minimal Example
## API is still being finalized and may change when released
This example includes Webamp in a Webpack bundle. The audio file and skin are fetched from a free CDN at run time. Milkdrop and visualizer presets are lazy loaded after playing starts.
**Note:** Currently Webamp is published to NPM as a single bundle which includes all of its dependencies. This means that no matter what you do, Webamp is going to bring along it's own React, Redux, JSZip, etc. If you have a use case where you would like Webamp to share some or all of these dependencies with your own application, please file an issue and I can look into it.
To try it out:
```
$ git clone git@github.com:captbaritone/webamp.git
$ cd webamp/examples/webpack/
$ npm install
$ npm run build
$ open index.html
```

13
examples/webpackLazyLoad/index.html Executable file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id='app'></div>
<script src="./bundle.js"></script>
</body>
</html>

38
examples/webpackLazyLoad/index.js Normal file
View File

@ -0,0 +1,38 @@
import Webamp from "webamp"; // eslint-disable-line import/no-unresolved
new Webamp({
initialTracks: [
{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
url:
"https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
duration: 5.322286,
},
],
__butterchurnOptions: {
importButterchurn: () => {
// Only load butterchurn when music starts playing to reduce initial page load
return import("butterchurn");
},
getPresets: async () => {
// Load presets from preset URL mapping on demand as they are used
const resp = await fetch(
"https://unpkg.com/butterchurn-presets-weekly@0.0.2/weeks/week1/presets.json"
);
const namesToPresetUrls = await resp.json();
return Object.keys(namesToPresetUrls).map(name => {
return { name, butterchurnPresetUrl: namesToPresetUrls[name] };
});
},
butterchurnOpen: true,
},
__initialWindowLayout: {
main: { position: { x: 0, y: 0 } },
equalizer: { position: { x: 0, y: 116 } },
playlist: { position: { x: 0, y: 232 }, size: [0, 4] },
milkdrop: { position: { x: 275, y: 0 }, size: [7, 12] },
},
}).renderWhenReady(document.getElementById("app"));

19
examples/webpackLazyLoad/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "webamp-webpack-example",
"version": "0.0.0",
"description": "An example of using Webamp within a Webpack bundle",
"main": "index.js",
"scripts": {
"build": "webpack index.js -o bundle.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"butterchurn": "^2.6.7",
"webamp": "1.3.1"
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}