src/music: Add music page
This commit is contained in:
parent
7965a38afa
commit
8166ee99ec
BIN
src/music/Mseq_-_Journey.mp3
Normal file
BIN
src/music/Mseq_-_Journey.mp3
Normal file
Binary file not shown.
7
src/music/music.js
Normal file
7
src/music/music.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import "bootstrap";
|
||||||
|
import "./music.scss";
|
||||||
|
import music from "./Mseq_-_Journey.mp3";
|
||||||
|
|
||||||
|
import Player from "./player/index.js";
|
||||||
|
|
||||||
|
window.player = new Player(music);
|
4
src/music/music.pug
Normal file
4
src/music/music.pug
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
extends ../lib/pug/base
|
||||||
|
|
||||||
|
block content
|
||||||
|
#playerUI
|
7
src/music/music.scss
Normal file
7
src/music/music.scss
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
@import "../lib/scss/main";
|
||||||
|
@import "~bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
|
#playerUI {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
29
src/music/player/index.js
Normal file
29
src/music/player/index.js
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
class AudioManager {
|
||||||
|
constructor(src) {
|
||||||
|
this._context = new AudioContext();
|
||||||
|
this.audio = new Audio(src);
|
||||||
|
|
||||||
|
let audio = this.audio;
|
||||||
|
let context = this._context;
|
||||||
|
|
||||||
|
// Create audio graph
|
||||||
|
let volume = context.createGain();
|
||||||
|
let source = context.createMediaElementSource(audio);
|
||||||
|
|
||||||
|
source.connect(volume);
|
||||||
|
volume.connect(context.destination);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Player {
|
||||||
|
constructor(src="https://tlater.net/assets/Mseq_-_Journey.mp3") {
|
||||||
|
this._ui = $("#playerUI");
|
||||||
|
this._audioManager = new AudioManager(src);
|
||||||
|
|
||||||
|
let audioManager = this._audioManager;
|
||||||
|
|
||||||
|
audioManager.oncanplay = () => audioManager.audio.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Player;
|
7
src/pages/music.json
Normal file
7
src/pages/music.json
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"hash": true,
|
||||||
|
"title": "tlater.net music",
|
||||||
|
"filename": "../music.html",
|
||||||
|
"template": "./src/music/music.pug",
|
||||||
|
"chunks": ["music"]
|
||||||
|
}
|
|
@ -19,7 +19,8 @@ module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
index: "./src/index/index.js",
|
index: "./src/index/index.js",
|
||||||
mail: "./src/mail/mail.js",
|
mail: "./src/mail/mail.js",
|
||||||
startpage: "./src/startpage/startpage.js"
|
startpage: "./src/startpage/startpage.js",
|
||||||
|
music: "./src/music/music.js"
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
filename: "[name].bundle.js",
|
filename: "[name].bundle.js",
|
||||||
|
@ -80,6 +81,15 @@ module.exports = {
|
||||||
loader: "pug-loader"
|
loader: "pug-loader"
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
test: /\.mp3$/,
|
||||||
|
use: [{
|
||||||
|
loader: "file-loader",
|
||||||
|
options: {
|
||||||
|
publicPath: "static/"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
test: /\.(eot|svg|ttf|woff|woff2)$/,
|
test: /\.(eot|svg|ttf|woff|woff2)$/,
|
||||||
use: [{
|
use: [{
|
||||||
|
|
Reference in a new issue