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: {
|
||||
index: "./src/index/index.js",
|
||||
mail: "./src/mail/mail.js",
|
||||
startpage: "./src/startpage/startpage.js"
|
||||
startpage: "./src/startpage/startpage.js",
|
||||
music: "./src/music/music.js"
|
||||
},
|
||||
output: {
|
||||
filename: "[name].bundle.js",
|
||||
|
@ -80,6 +81,15 @@ module.exports = {
|
|||
loader: "pug-loader"
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: /\.mp3$/,
|
||||
use: [{
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
publicPath: "static/"
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2)$/,
|
||||
use: [{
|
||||
|
|
Reference in a new issue