src/music: Add music page

src/music/music.js

@@ -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);

src/music/music.pug

@@ -0,0 +1,4 @@
+extends ../lib/pug/base
+
+block content
+  #playerUI

src/music/music.scss

@@ -0,0 +1,7 @@
+@import "../lib/scss/main";
+@import "~bootstrap/scss/bootstrap";
+
+#playerUI {
+  width: 100%;
+  height: 100%;
+}

src/music/player/index.js

@@ -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;

src/pages/music.json

@@ -0,0 +1,7 @@
+{
+    "hash": true,
+    "title": "tlater.net music",
+    "filename": "../music.html",
+    "template": "./src/music/music.pug",
+    "chunks": ["music"]
+}

webpack.common.js

@@ -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: [{