Switch to react-redux for the music player
Tristan Daniël Maat
parent
5d4ed8e167
commit
4d013e37a4
GPG Key ID:
49670FD774E43268
|
|
@ -3125,6 +3125,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"classnames": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
|
||||
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
|
||||
},
|
||||
"clean-css": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
|
||||
|
|
|
|||
|
|
@ -16,9 +16,18 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.12.1",
|
||||
"@types/react": "^16.9.23",
|
||||
"@types/react-redux": "^7.1.7",
|
||||
"bootstrap": "^4.0.0",
|
||||
"classnames": "^2.2.6",
|
||||
"immutability-helper": "^3.0.1",
|
||||
"jquery": "^3.3.1",
|
||||
"popper.js": "^1.16.1",
|
||||
"react": "^16.13.0",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-redux": "^7.2.0",
|
||||
"redux": "^4.0.5",
|
||||
"redux-act": "^1.7.7",
|
||||
"three": "^0.101.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import Controls from "./components/controls";
|
||||
import Visualizer from "./components/visualizer";
|
||||
import { State } from "./store";
|
||||
|
||||
type AudioState = {
|
||||
audioContext: AudioContext;
|
||||
audioSource: HTMLAudioElement;
|
||||
audioSourceNode: MediaElementAudioSourceNode;
|
||||
audioVolume: GainNode;
|
||||
};
|
||||
|
||||
type MusicPlayerProps = {
|
||||
playing: boolean;
|
||||
muted: boolean;
|
||||
source?: string;
|
||||
};
|
||||
|
||||
class MusicPlayer extends React.Component<MusicPlayerProps, {}> {
|
||||
private audioState: AudioState;
|
||||
|
||||
constructor(props: MusicPlayerProps) {
|
||||
super(props);
|
||||
|
||||
let context = new AudioContext();
|
||||
let source = new Audio();
|
||||
let sourceNode = context.createMediaElementSource(source);
|
||||
let volume = context.createGain();
|
||||
|
||||
sourceNode.connect(volume);
|
||||
volume.connect(context.destination);
|
||||
|
||||
this.audioState = {
|
||||
audioContext: context,
|
||||
audioSourceNode: sourceNode,
|
||||
audioSource: source,
|
||||
audioVolume: volume,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="player" style={{ height: "100%", width: "100%" }}>
|
||||
<Visualizer
|
||||
audioContext={this.audioState.audioContext}
|
||||
audioSource={this.audioState.audioSourceNode}
|
||||
/>
|
||||
<Controls />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
let context = this.audioState.audioContext;
|
||||
let source = this.audioState.audioSource;
|
||||
let volume = this.audioState.audioVolume;
|
||||
|
||||
// First, set the audio source (if it changed)
|
||||
if (this.props.source && source.src != this.props.source) {
|
||||
source.src = this.props.source;
|
||||
}
|
||||
|
||||
if (this.props.playing) {
|
||||
source
|
||||
.play()
|
||||
.then(() => {
|
||||
console.info("Started playing audio");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(`Could not play audio: ${error}`);
|
||||
});
|
||||
} else {
|
||||
source.pause();
|
||||
}
|
||||
|
||||
if (!this.props.muted) {
|
||||
volume.gain.setValueAtTime(1, context.currentTime);
|
||||
} else {
|
||||
volume.gain.setValueAtTime(0, context.currentTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State): MusicPlayerProps {
|
||||
return {
|
||||
playing: state.musicState.playing,
|
||||
muted: state.musicState.muted,
|
||||
source: state.musicState.source,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(MusicPlayer);
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import React from "react";
|
||||
import Redux from "redux";
|
||||
import { connect } from "react-redux";
|
||||
|
||||
import { State } from "../store";
|
||||
import { Title, togglePlay } from "../store/music/types";
|
||||
import Indicator from "./indicator";
|
||||
|
||||
type ControlProps = {
|
||||
title: Title;
|
||||
};
|
||||
|
||||
class Controls extends React.Component<ControlProps, {}> {
|
||||
render() {
|
||||
return (
|
||||
<div id="playerControls" className="container-fluid fixed-bottom">
|
||||
<div className="row">
|
||||
<Indicator></Indicator>
|
||||
<div
|
||||
id="playerText"
|
||||
className="text-justify text-truncate col-6 playerControlsContent"
|
||||
>
|
||||
{this.props.title.name} - {this.props.title.album}
|
||||
</div>
|
||||
|
||||
{this.props.title.name === "Journey" &&
|
||||
this.props.title.artist === "Mseq" ? (
|
||||
<div id="copyrightNotice" className="col text-center">
|
||||
<a href="http://dig.ccmixter.org/files/Mseq/54702">Journey</a>
|
||||
by Mseq (c) copyright 2016 Licensed under a Creative
|
||||
Commons
|
||||
<a href="http://creativecommons.org/licenses/by-nc/3.0/">
|
||||
Attribution Noncommercial (3.0)
|
||||
</a>
|
||||
license. Ft: Admiral Bob,Texas Radio Fish
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State): ControlProps {
|
||||
return {
|
||||
title: state.musicState.title,
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(Controls);
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import React from "react";
|
||||
import { connect } from "react-redux";
|
||||
import classNames from "classnames";
|
||||
|
||||
import { State } from "../store";
|
||||
import { MusicState, togglePlay } from "../store/music/types";
|
||||
|
||||
type IndicatorProps = {
|
||||
muted: boolean;
|
||||
playing: boolean;
|
||||
};
|
||||
|
||||
type IndicatorDispatch = {
|
||||
play: () => void;
|
||||
};
|
||||
|
||||
type Props = IndicatorProps & IndicatorDispatch;
|
||||
|
||||
class Indicator extends React.Component<Props, {}> {
|
||||
click() {
|
||||
this.props.play();
|
||||
}
|
||||
|
||||
render() {
|
||||
let classes = classNames({
|
||||
"col-auto": true,
|
||||
"text-center": true,
|
||||
fas: true,
|
||||
"fa-muted": this.props.muted,
|
||||
"fa-play": this.props.playing,
|
||||
"fa-pause": !this.props.playing,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
id="playerIndicator"
|
||||
onClick={this.click.bind(this)}
|
||||
className={classes}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state: State): IndicatorProps {
|
||||
return {
|
||||
muted: state.musicState.muted,
|
||||
playing: state.musicState.playing,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: Redux.Dispatch<any>): IndicatorDispatch {
|
||||
return {
|
||||
play: () => {
|
||||
dispatch(togglePlay());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Indicator);
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
import React from "react";
|
||||
import * as three from "three";
|
||||
|
||||
type VisualizerProps = {
|
||||
audioContext: AudioContext;
|
||||
audioSource: AudioNode;
|
||||
};
|
||||
|
||||
class CanvasDrawer {
|
||||
private analyser: AnalyserNode;
|
||||
private canvas: HTMLCanvasElement;
|
||||
|
||||
private analyserData: Float32Array;
|
||||
|
||||
private boxes: Array<three.Mesh>;
|
||||
private camera: three.Camera;
|
||||
private renderer: three.Renderer;
|
||||
private scene: three.Scene;
|
||||
|
||||
private angle: number;
|
||||
|
||||
private animationFrame: number;
|
||||
private lastTime: number;
|
||||
|
||||
constructor(analyser: AnalyserNode, canvas: HTMLCanvasElement) {
|
||||
this.analyser = analyser;
|
||||
this.canvas = canvas;
|
||||
|
||||
// Set up analyser data storage
|
||||
this.analyserData = new Float32Array(analyser.frequencyBinCount);
|
||||
|
||||
// Initialize the scene
|
||||
this.scene = new three.Scene();
|
||||
|
||||
// Make a bunch of boxes to represent the bars
|
||||
this.boxes = Array(analyser.frequencyBinCount);
|
||||
let width = 2 / analyser.frequencyBinCount;
|
||||
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
|
||||
let geometry = new three.BoxGeometry(1, 1, 1);
|
||||
let material = new three.MeshLambertMaterial({
|
||||
color: new three.Color(0x99d1ce),
|
||||
});
|
||||
let cube = new three.Mesh(geometry, material);
|
||||
|
||||
cube.scale.set(width, 1e-6, width);
|
||||
cube.position.set(-1 + freq * width, 0, 0);
|
||||
|
||||
this.scene.add(cube);
|
||||
this.boxes[freq] = cube;
|
||||
}
|
||||
|
||||
// Add lights for shadowing
|
||||
let ambientLight = new three.AmbientLight(0xffffff, 0.4);
|
||||
this.scene.add(ambientLight);
|
||||
|
||||
let directionalLight = new three.DirectionalLight(0xffffff, 1);
|
||||
directionalLight.position.set(-1, 0.3, -1);
|
||||
directionalLight.castShadow = true;
|
||||
this.scene.add(directionalLight);
|
||||
|
||||
// Add a camera
|
||||
this.angle = 3;
|
||||
this.camera = new three.PerspectiveCamera(
|
||||
70,
|
||||
canvas.width / canvas.height,
|
||||
0.01,
|
||||
10
|
||||
);
|
||||
this.camera.lookAt(0, 0, 0);
|
||||
this.scene.add(this.camera);
|
||||
this.rotateCamera(1);
|
||||
|
||||
// Add a renderer
|
||||
this.renderer = new three.WebGLRenderer({
|
||||
antialias: true,
|
||||
canvas: canvas,
|
||||
powerPreference: "low-power",
|
||||
});
|
||||
|
||||
this.renderer.setClearColor(new three.Color(0x0f0f0f));
|
||||
this.renderer.setSize(canvas.width, canvas.height);
|
||||
|
||||
// Set up canvas resizing
|
||||
window.addEventListener("resize", this.resize.bind(this));
|
||||
|
||||
// Run the first, set the first animation frame time and start requesting
|
||||
// animation frames
|
||||
this.resize();
|
||||
this.lastTime = 0;
|
||||
this.animationFrame = requestAnimationFrame(this.render.bind(this));
|
||||
}
|
||||
|
||||
render(time: number) {
|
||||
// Set our animation frame to 0, so that if we stop, we don't try to cancel a past animation frame
|
||||
this.animationFrame = 0;
|
||||
// Update elapsed time
|
||||
let elapsed = time - this.lastTime;
|
||||
this.lastTime = time;
|
||||
|
||||
let camera = this.camera;
|
||||
let renderer = this.renderer;
|
||||
let scene = this.scene;
|
||||
|
||||
this.scaleBoxes();
|
||||
this.rotateCamera(elapsed);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
this.animationFrame = requestAnimationFrame(this.render.bind(this));
|
||||
}
|
||||
|
||||
scaleBoxes() {
|
||||
let analyser = this.analyser;
|
||||
|
||||
analyser.getFloatFrequencyData(this.analyserData);
|
||||
|
||||
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
|
||||
let height = analyser.maxDecibels / this.analyserData[freq];
|
||||
|
||||
if (height > 0.3) {
|
||||
height -= 0.3;
|
||||
} else {
|
||||
height = 1e-6;
|
||||
}
|
||||
|
||||
this.boxes[freq].scale.y = height;
|
||||
}
|
||||
}
|
||||
|
||||
rotateCamera(elapsed: number) {
|
||||
if (this.angle >= Math.PI * 2) {
|
||||
this.angle = 0;
|
||||
} else {
|
||||
this.angle += 0.1 * (elapsed / 1000);
|
||||
}
|
||||
|
||||
let camera = this.camera;
|
||||
let angle = this.angle;
|
||||
|
||||
camera.position.x = 1.01 * Math.sin(angle);
|
||||
camera.position.z = 1.01 * Math.cos(angle);
|
||||
|
||||
/* camera.position.y = (1 - Math.abs(angle - 0.5) / 0.5); */
|
||||
camera.lookAt(0, 0, 0);
|
||||
}
|
||||
|
||||
resize() {
|
||||
let canvas = this.canvas;
|
||||
if (canvas.parentElement === null) {
|
||||
throw Error("Could not access canvas parent for size calculation");
|
||||
}
|
||||
|
||||
// Compute the height of all our siblings
|
||||
let combinedHeight = 0;
|
||||
for (let i = 0; i < canvas.parentElement.children.length; i++) {
|
||||
const child = canvas.parentElement.children[i];
|
||||
|
||||
if (child != canvas) {
|
||||
combinedHeight += child.clientHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// The remaining space we want to fill
|
||||
let remainingHeight = canvas.parentElement.clientHeight - combinedHeight;
|
||||
canvas.height = remainingHeight;
|
||||
canvas.width = canvas.parentElement.clientWidth;
|
||||
|
||||
this.camera.aspect = canvas.width / remainingHeight;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(canvas.width, remainingHeight);
|
||||
}
|
||||
|
||||
stop() {
|
||||
if (this.animationFrame != 0) {
|
||||
cancelAnimationFrame(this.animationFrame);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Visualizer extends React.Component<VisualizerProps, {}> {
|
||||
private analyser: AnalyserNode;
|
||||
private canvas: React.RefObject<HTMLCanvasElement>;
|
||||
private drawer: CanvasDrawer;
|
||||
|
||||
constructor(props: VisualizerProps) {
|
||||
super(props);
|
||||
this.canvas = React.createRef();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<canvas
|
||||
id="visualizer"
|
||||
ref={this.canvas}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
></canvas>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.canvas.current === null) {
|
||||
throw Error("Failed to create canvas; aborting");
|
||||
}
|
||||
|
||||
this.analyser = this.props.audioContext.createAnalyser();
|
||||
this.analyser.fftSize = 2048;
|
||||
this.analyser.smoothingTimeConstant = 0.8;
|
||||
this.props.audioSource.connect(this.analyser);
|
||||
|
||||
this.drawer = new CanvasDrawer(this.analyser, this.canvas.current);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.drawer.stop();
|
||||
this.props.audioSource.disconnect(this.analyser);
|
||||
}
|
||||
}
|
||||
|
||||
export default Visualizer;
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
import { store } from "./store";
|
||||
import MusicPlayer from "./MusicPlayer";
|
||||
import { setSource, setTitle } from "./store/music/types";
|
||||
import mseq from "./Mseq_-_Journey.mp3";
|
||||
|
||||
const rootElement = document.getElementById("playerUI");
|
||||
|
||||
ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<MusicPlayer />
|
||||
</Provider>,
|
||||
rootElement
|
||||
);
|
||||
|
||||
store.dispatch(setSource(mseq));
|
||||
store.dispatch(
|
||||
setTitle({
|
||||
name: "Journey",
|
||||
artist: "Mseq",
|
||||
album: "Unknown album",
|
||||
length: 192052244,
|
||||
})
|
||||
);
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import music from "./Mseq_-_Journey.mp3";
|
||||
import Player from "./player/player.js";
|
||||
|
||||
window.player = new Player(music);
|
||||
|
|
@ -2,16 +2,19 @@
|
|||
// @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||
// @import "@fortawesome/fontawesome-free/scss/solid.scss";
|
||||
|
||||
@import "~/src/lib/scss/main";
|
||||
/* @import "~/src/lib/scss/main"; */
|
||||
@import url("~/node_modules/@fortawesome/fontawesome-free/scss/fontawesome");
|
||||
@import url("~/node_modules/@fortawesome/fontawesome-free/scss/solid");
|
||||
|
||||
#playerControls {
|
||||
background-color: $dark;
|
||||
background-color: #11151c;
|
||||
max-width: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.playerControlsContent {
|
||||
.playerControlsContent, #playerIndicator {
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#playerButton {
|
||||
|
|
|
|||
|
|
@ -1,56 +0,0 @@
|
|||
/**
|
||||
* AudioManager()
|
||||
*
|
||||
* A class to manage the audio stream.
|
||||
*
|
||||
* @param {string} src - The URL of the audio to play.
|
||||
*/
|
||||
class AudioManager {
|
||||
constructor(src) {
|
||||
this._muted = false;
|
||||
|
||||
// Create audio graph
|
||||
this._context = new AudioContext();
|
||||
this.audio = new Audio(src);
|
||||
this._volume = this._context.createGain();
|
||||
this._source = this._context.createMediaElementSource(this.audio);
|
||||
|
||||
let context = this._context;
|
||||
let volume = this._volume;
|
||||
let source = this._source;
|
||||
|
||||
source.connect(volume);
|
||||
volume.connect(context.destination);
|
||||
}
|
||||
|
||||
get context() {
|
||||
return this._context;
|
||||
}
|
||||
|
||||
get source() {
|
||||
return this._source;
|
||||
}
|
||||
|
||||
get muted() {
|
||||
return this._muted;
|
||||
}
|
||||
|
||||
addEventListener(...args) {
|
||||
this.audio.addEventListener(...args);
|
||||
}
|
||||
|
||||
mute() {
|
||||
let context = this._context;
|
||||
let volume = this._volume;
|
||||
|
||||
if (this._muted) {
|
||||
volume.gain.setValueAtTime(1, context.currentTime);
|
||||
} else {
|
||||
volume.gain.setValueAtTime(0, context.currentTime);
|
||||
}
|
||||
|
||||
this._muted = !this._muted;
|
||||
}
|
||||
}
|
||||
|
||||
export default AudioManager;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
class Background {
|
||||
constructor(display, audioManager) {
|
||||
if (this.constructor === Background)
|
||||
throw new Error("Cannot instantiate abstract class!");
|
||||
}
|
||||
|
||||
start() {}
|
||||
|
||||
stop() {}
|
||||
}
|
||||
|
||||
export default Background;
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
import $ from "jquery";
|
||||
import * as three from "three";
|
||||
|
||||
import Background from "../background";
|
||||
|
||||
class Spectrum extends Background {
|
||||
constructor(display, audioManager) {
|
||||
super(audioManager, display);
|
||||
|
||||
this._audioManager = audioManager;
|
||||
this._display = display;
|
||||
|
||||
this._init_analyser();
|
||||
this._init_scene();
|
||||
this._init_objects();
|
||||
this._resize();
|
||||
}
|
||||
|
||||
_get_canvas_height() {
|
||||
return (
|
||||
this._display.parent().height() -
|
||||
this._display
|
||||
.siblings()
|
||||
.toArray()
|
||||
.reduce((a, b) => {
|
||||
return a + b.clientHeight;
|
||||
}, 0)
|
||||
);
|
||||
}
|
||||
|
||||
_resize() {
|
||||
this._camera.aspect = this._display.width() / this._get_canvas_height();
|
||||
this._camera.updateProjectionMatrix();
|
||||
this._renderer.setSize(
|
||||
this._display.width(),
|
||||
this._get_canvas_height()
|
||||
);
|
||||
}
|
||||
|
||||
_init_analyser() {
|
||||
let audioManager = this._audioManager;
|
||||
|
||||
let analyser = audioManager.context.createAnalyser();
|
||||
analyser.fftSize = 2048;
|
||||
analyser.smoothingTimeConstant = 0.8;
|
||||
|
||||
let analyser_data = new Float32Array(analyser.frequencyBinCount);
|
||||
|
||||
audioManager.source.connect(analyser);
|
||||
analyser.getFloatFrequencyData(analyser_data);
|
||||
|
||||
this._analyser = analyser;
|
||||
this._analyser_data = analyser_data;
|
||||
}
|
||||
|
||||
_init_scene() {
|
||||
let scene = new three.Scene();
|
||||
|
||||
let camera = new three.PerspectiveCamera(
|
||||
70,
|
||||
this._display.width() / this._get_canvas_height(),
|
||||
0.01,
|
||||
10
|
||||
);
|
||||
camera.position.z = 1;
|
||||
scene.add(camera);
|
||||
|
||||
let renderer = new three.WebGLRenderer({
|
||||
antialias: true,
|
||||
powerPreference: "low-power"
|
||||
});
|
||||
|
||||
renderer.setSize(this._display.width(), this._display.height());
|
||||
|
||||
this._display.append(renderer.domElement);
|
||||
|
||||
this._scene = scene;
|
||||
this._camera = camera;
|
||||
this._renderer = renderer;
|
||||
|
||||
// Set the resize handler
|
||||
$(window).resize(() => this._resize());
|
||||
}
|
||||
|
||||
_init_objects() {
|
||||
let analyser = this._analyser;
|
||||
let scene = this._scene;
|
||||
|
||||
let boxes = Array(analyser.frequencyBinCount);
|
||||
let width = 2 / analyser.frequencyBinCount;
|
||||
|
||||
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
|
||||
let geometry = new three.BoxGeometry(1, 1, 1);
|
||||
let material = new three.MeshBasicMaterial({ color: 0x99d1ce });
|
||||
let cube = new three.Mesh(geometry, material);
|
||||
|
||||
cube.scale.set(width, 1e-6, width);
|
||||
cube.position.set(-1 + freq * width, 0, 0);
|
||||
|
||||
scene.add(cube);
|
||||
boxes[freq] = cube;
|
||||
}
|
||||
|
||||
this._boxes = boxes;
|
||||
}
|
||||
|
||||
start() {
|
||||
requestAnimationFrame(this._render.bind(this));
|
||||
}
|
||||
|
||||
_render() {
|
||||
let analyser = this._analyser;
|
||||
let camera = this._camera;
|
||||
let renderer = this._renderer;
|
||||
let scene = this._scene;
|
||||
|
||||
for (let freq = 0; freq < analyser.frequencyBinCount; freq++) {
|
||||
let height = analyser.maxDecibels / this._analyser_data[freq];
|
||||
|
||||
if (height > 0.3) {
|
||||
height -= 0.3;
|
||||
} else {
|
||||
height = 1e-6;
|
||||
}
|
||||
|
||||
this._boxes[freq].scale.y = height;
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
analyser.getFloatFrequencyData(this._analyser_data);
|
||||
requestAnimationFrame(this._render.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
export default Spectrum;
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
import $ from "jquery";
|
||||
|
||||
/**
|
||||
* _Text()
|
||||
*
|
||||
* A helper class to control the text area for audio controls.
|
||||
*
|
||||
* @private
|
||||
* @param {HTMLElement} div - The div of the text area.
|
||||
*/
|
||||
class _Text {
|
||||
constructor(div) {
|
||||
this._element = div;
|
||||
|
||||
this._text = "";
|
||||
this._flashing = false;
|
||||
|
||||
this._flash_timeout = null;
|
||||
}
|
||||
|
||||
flashText(text) {
|
||||
let element = this._element;
|
||||
let flash_timeout = this._flash_timeout;
|
||||
|
||||
element.html(text);
|
||||
this._flashing = true;
|
||||
|
||||
clearTimeout(flash_timeout);
|
||||
this._flash_timeout = setTimeout(() => {
|
||||
this._flashing = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
setText(text) {
|
||||
let element = this._element;
|
||||
let flashing = this._flashing;
|
||||
|
||||
if (!flashing) {
|
||||
element.html(text);
|
||||
}
|
||||
|
||||
this._text = text;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* _Button()
|
||||
*
|
||||
* A helper class to control the indicator button for audio controls.
|
||||
*
|
||||
* @private
|
||||
* @param {HTMLElement} button - The div of the button.
|
||||
*/
|
||||
class _Button {
|
||||
constructor(button) {
|
||||
this._element = button;
|
||||
|
||||
this._classes = "";
|
||||
this._flash_classes = "";
|
||||
this._flashing = false;
|
||||
|
||||
this._flash_timeout = null;
|
||||
}
|
||||
|
||||
click(callback) {
|
||||
this._element.click(callback);
|
||||
}
|
||||
|
||||
flashIcon(icon) {
|
||||
let classes = this._classes;
|
||||
let element = this._element;
|
||||
let flash_classes = this._flash_classes;
|
||||
let flash_timeout = this._flash_timeout;
|
||||
|
||||
// We remove any potentially current classes, and add the
|
||||
// requested icon class.
|
||||
element.removeClass(flash_classes);
|
||||
element.removeClass(classes);
|
||||
element.addClass(icon);
|
||||
|
||||
// We keep track of the classes we are flashing and the fact
|
||||
// that we are flashing, so that we can remove the correct
|
||||
// classes later.
|
||||
this._flash_classes = icon;
|
||||
this._flashing = true;
|
||||
|
||||
// If we previously started a timeout, we'll want to cancel it
|
||||
// now, since otherwise *it* will clear out our classes.
|
||||
clearTimeout(flash_timeout);
|
||||
|
||||
// We start a timeout to reset to the original classes.
|
||||
this._flash_timeout = setTimeout(() => {
|
||||
element.removeClass(this._flash_classes);
|
||||
element.addClass(this._classes);
|
||||
|
||||
this._flash_classes = "";
|
||||
this._flashing = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
setIcon(icon) {
|
||||
let classes = this._classes;
|
||||
let element = this._element;
|
||||
let flashing = this._flashing;
|
||||
|
||||
// If we are currently flashing an icon, we'll hold off on
|
||||
// changing the icon.
|
||||
if (!flashing) {
|
||||
element.removeClass(classes);
|
||||
element.addClass(icon);
|
||||
}
|
||||
|
||||
this._classes = icon;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Controls()
|
||||
*
|
||||
* A class to manage music player controls.
|
||||
*
|
||||
* @param {AudioManager} audioManager - The audio manager to interact with.
|
||||
*/
|
||||
class Controls {
|
||||
constructor(audioManager) {
|
||||
this._element = $("#playerControls");
|
||||
this._button = new _Button($("#playerControls #playerButton"));
|
||||
this._text = new _Text($("#playerControls #playerText"));
|
||||
this._audioManager = audioManager;
|
||||
|
||||
this._setAudioEvents({
|
||||
canplay: () => this._audioManager.audio.play(),
|
||||
error: () => this.setError(this._audioManager.audio.error.message),
|
||||
loadstart: () => this.setLoading(),
|
||||
playing: () => this.setPlaying(),
|
||||
stalled: () => this.setLoading("Stalling")
|
||||
});
|
||||
|
||||
this._button.click(() => this.mute());
|
||||
}
|
||||
|
||||
setPlaying() {
|
||||
let button = this._button;
|
||||
let text = this._text;
|
||||
|
||||
button.setIcon("fa-play");
|
||||
text.setText("");
|
||||
}
|
||||
|
||||
setLoading(reason = "Loading") {
|
||||
let button = this._button;
|
||||
let text = this._text;
|
||||
|
||||
button.setIcon("fa-spin fa-spinner");
|
||||
text.setText(reason);
|
||||
}
|
||||
|
||||
setError(reason = "") {
|
||||
let button = this._button;
|
||||
let text = this._text;
|
||||
|
||||
if (reason == "") {
|
||||
reason = "Error";
|
||||
} else {
|
||||
reason = `Error: ${reason}`;
|
||||
}
|
||||
|
||||
button.setIcon("fa-stop-circle");
|
||||
text.setText(reason);
|
||||
}
|
||||
|
||||
mute() {
|
||||
let audioManager = this._audioManager;
|
||||
let button = this._button;
|
||||
let text = this._text;
|
||||
|
||||
audioManager.mute();
|
||||
|
||||
if (audioManager.muted) {
|
||||
button.flashIcon("fa-volume-off");
|
||||
text.flashText("Muted");
|
||||
} else {
|
||||
button.flashIcon("fa-volume-up");
|
||||
text.flashText("Unmuted");
|
||||
}
|
||||
}
|
||||
|
||||
_setAudioEvents(events) {
|
||||
for (let [event, handler] of Object.entries(events)) {
|
||||
this._audioManager.addEventListener(event, handler);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Controls;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import $ from "jquery";
|
||||
import Spectrum from "./backgrounds/Spectrum.js";
|
||||
|
||||
let backgrounds = {
|
||||
Spectrum: Spectrum
|
||||
};
|
||||
|
||||
class Display {
|
||||
constructor(audioManager) {
|
||||
this._audioManager = audioManager;
|
||||
this._element = $("#playerContent");
|
||||
|
||||
this._background = new backgrounds["Spectrum"](
|
||||
this._element,
|
||||
audioManager
|
||||
);
|
||||
this._background.start();
|
||||
}
|
||||
|
||||
set background(name) {}
|
||||
}
|
||||
|
||||
export default Display;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import $ from "jquery";
|
||||
import AudioManager from "./audio_manager";
|
||||
import Controls from "./controls";
|
||||
import Display from "./display";
|
||||
|
||||
class Player {
|
||||
constructor(src = "https://tlater.net/assets/Mseq_-_Journey.mp3") {
|
||||
this._ui = $("#playerUI");
|
||||
this._audioManager = new AudioManager(src);
|
||||
this._controls = new Controls(this._audioManager);
|
||||
this._display = new Display(this._audioManager);
|
||||
}
|
||||
}
|
||||
|
||||
export default Player;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { createStore, combineReducers } from "redux";
|
||||
|
||||
import { MusicState } from "./music/types";
|
||||
import { musicStateReducer } from "./music/reducers";
|
||||
|
||||
export interface State {
|
||||
musicState: MusicState;
|
||||
}
|
||||
|
||||
const rootReducer = combineReducers<State>({
|
||||
musicState: musicStateReducer,
|
||||
});
|
||||
|
||||
export const store = createStore(
|
||||
rootReducer,
|
||||
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
|
||||
);
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { createReducer } from "redux-act";
|
||||
import update from "immutability-helper";
|
||||
|
||||
import {
|
||||
Title,
|
||||
MusicState,
|
||||
setTitle,
|
||||
toggleMute,
|
||||
togglePlay,
|
||||
setSource,
|
||||
} from "./types";
|
||||
|
||||
const defaultTitle: Title = {
|
||||
name: "Untitled",
|
||||
artist: "Unknown Artist",
|
||||
album: "Unknown Album",
|
||||
length: 0,
|
||||
};
|
||||
|
||||
const initialState: MusicState = {
|
||||
muted: false,
|
||||
playing: false,
|
||||
title: defaultTitle,
|
||||
playTime: 0,
|
||||
};
|
||||
|
||||
export const musicStateReducer = createReducer<MusicState>(
|
||||
{
|
||||
[setTitle]: (state: MusicState, title: Title): MusicState => {
|
||||
return update(state, {
|
||||
title: { $set: title },
|
||||
});
|
||||
},
|
||||
[togglePlay]: (state: MusicState): MusicState => {
|
||||
return update(state, { $toggle: ["playing"] });
|
||||
},
|
||||
[toggleMute]: (state: MusicState): MusicState => {
|
||||
return update(state, { $toggle: ["muted"] });
|
||||
},
|
||||
[setSource]: (state: MusicState, source: string): MusicState => {
|
||||
return update(state, { source: { $set: source } });
|
||||
},
|
||||
},
|
||||
initialState
|
||||
);
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { Action, createAction } from "redux-act";
|
||||
|
||||
export interface Title {
|
||||
name: string;
|
||||
artist: string;
|
||||
album: string;
|
||||
/**
|
||||
* The length of the title in nanoseconds.
|
||||
*/
|
||||
length: number;
|
||||
}
|
||||
|
||||
export interface MusicState {
|
||||
muted: boolean;
|
||||
playing: boolean;
|
||||
title: Title;
|
||||
playTime: number;
|
||||
source?: string;
|
||||
}
|
||||
|
||||
export const setTitle: (title: Title) => Action<null, null> = createAction(
|
||||
"set currently playing title"
|
||||
);
|
||||
|
||||
export const setPlayTime: (time: number) => Action<null, null> = createAction(
|
||||
"set the play time"
|
||||
);
|
||||
|
||||
export const toggleMute: () => Action<null, null> = createAction("toggle mute");
|
||||
|
||||
export const togglePlay: () => Action<null, null> = createAction("toggle play");
|
||||
|
||||
export const setSource: (source: string) => Action<null, null> = createAction(
|
||||
"set the title"
|
||||
);
|
||||
|
|
@ -5,10 +5,4 @@ block stylesheets
|
|||
|
||||
block footer
|
||||
#playerUI.container-fluid.flex-grow-1
|
||||
.row.d-flex.flex-column.h-100
|
||||
#playerContent.container-fluid.flex-grow-1
|
||||
#playerControls.container-fluid.fixed-bottom
|
||||
.row
|
||||
span#playerButton.col-1.playerControlsContent.fa.fa-fw.fa-spin.fa-spinner
|
||||
#playerText.col-11.playerControlsContent Some text for now
|
||||
script(type="text/javascript" src="./music/music.js")
|
||||
script(type="text/javascript" src="./music/")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"strictNullChecks": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue