Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 02:15:01 +00:00
Code Issues Projects Releases Wiki Activity

Webpack is deprecated

Browse source
This commit is contained in:
Jordan Eldredge 2025-06-18 17:56:37 -07:00
parent 978c0fcabd
commit 1dc8c15bbb
8 changed files with 0 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

15
examples/webpack/README.md
View file

@ -1,15 +0,0 @@
# Minimal Example
This example includes Webamp in a Webpack bundle. The audio file and skin are fetched from a free CDN at run time.
**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
```

11
examples/webpack/index.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="app" style="height: 100vh"></div>
<script src="./dist/main.js"></script>
</body>
</html>

17
examples/webpack/index.js
View file

@ -1,17 +0,0 @@
import Webamp from "webamp";
new Webamp({
initialTracks: [
{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
// NOTE: Your audio file must be served from the same domain as your HTML
// file, or served with permissive CORS HTTP headers:
// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
duration: 5.322286,
},
],
}).renderWhenReady(document.getElementById("app"));

19
examples/webpack/package.json
View file

@ -1,19 +0,0 @@
{
"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 --output-path dist --mode=development"
},
"author": "",
"license": "ISC",
"dependencies": {
"webamp": "1.5.0"
},
"devDependencies": {
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4"
},
"prettier": {}
}

17
examples/webpackLazyLoad/README.md
View file

@ -1,17 +0,0 @@
# Minimal Lazy Loading 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/webpackLazyLoad/
$ npm install
$ npm run build
$ open index.html
```

11
examples/webpackLazyLoad/index.html
View file

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="app" style="height: 100vh"></div>
<script src="./bundle.js"></script>
</body>
</html>

45
examples/webpackLazyLoad/index.js
View file

@ -1,45 +0,0 @@
import Webamp from "webamp";
const webamp = new Webamp({
initialTracks: [
{
metaData: {
artist: "DJ Mike Llama",
title: "Llama Whippin' Intro",
},
// NOTE: Your audio file must be served from the same domain as your HTML
// file, or served with permissive CORS HTTP headers:
// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
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(
// NOTE: Your preset file must be served from the same domain as your HTML
// file, or served with permissive CORS HTTP headers:
// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
"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] },
},
});
webamp.renderWhenReady(document.getElementById("app"));

19
examples/webpackLazyLoad/package.json
View file

@ -1,19 +0,0 @@
{
"name": "webamp-webpack-lazy-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.5.0"
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"
}
}