Commit 2bf52a96 authored by marioromera's avatar marioromera
Browse files

add sound manager

parent a52e9e63
<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/><title>POC_WORKSHOP</title><link rel="shortcut icon" href="./favicon.ico"/><link rel="icon" href="favicon.ico"><link href="main.css" rel="stylesheet"></head><body><div class="app"><div class="id-container"><p>My name is:</p><input class="id-input"/><div class="scuttlebutt"><canvas id="node-pool" height="100%" width="100%"></canvas></div><span class="audio-icon">🔈</span></div><div id="webRTC" class="webRTC"><div class="p2p-containers"><div class="offer-container"><div class="table"><div class="row"><div class="column">Offer</div></div><div class="row"><div class="column">from</div></div><div class="row"><div class="column">you</div><div class="column">other</div></div><div class="row"><div class="column"><textarea class="offer-copy" placeholder="copy"></textarea></div><div class="column"><button type="button" class="offer-try btn">Try out</button></div></div><div class="row"><div class="column"><button type="button" class="offer-generate btn">Generate</button></div><div class="column"><textarea type="text" class="offer-paste" placeholder="Paste"></textarea></div></div></div></div><div class="answer-container"><div class="table"><div class="row"><div class="column">Answer</div></div><div class="row"><div class="column">from</div></div><div class="row"><div class="column">you</div><div class="column">other</div></div><div class="row"><div class="column"><textarea class="answer-copy" placeholder="copy"></textarea></div><div class="column"><textarea class="answer-paste" placeholder="Paste"></textarea></div></div><div class="row"><div class="column"></div><div class="column"><button type="button" class="answer-try btn">Try out</button></div></div></div></div></div></div><div class="drawing-container"><svg id="drawing-svg"></svg></div></div><script src="main.js"></script></body></html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
/*!
* The buffer module from node.js, for the browser.
*
* @author Feross Aboukhadijeh <http://feross.org>
* @license MIT
*/
/*! https://mths.be/utf8js v2.1.2 by @mathias */
/*! queue-microtask. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
/*! simple-peer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
/** @license
*
* SoundManager 2: JavaScript Sound for the Web
* ----------------------------------------------
* http://schillmania.com/projects/soundmanager2/
*
* Copyright (c) 2007, Scott Schiller. All rights reserved.
* Code provided under the BSD License:
* http://schillmania.com/projects/soundmanager2/license.txt
*
* V2.97a.20170601
*/
......@@ -26,6 +26,7 @@
"simple-peer": "^9.6.2",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.1",
"soundmanager2": "^2.97.20170602",
"url-loader": "^4.1.0"
},
"devDependencies": {
......
......@@ -19,6 +19,8 @@
<div class="scuttlebutt">
<canvas id="node-pool" height="100%" width="100%"></canvas>
</div>
<span class="audio-icon">🔈 </span>
</div>
<div id="webRTC" class="webRTC">
......
......@@ -16,9 +16,31 @@ import _ from 'lodash';
// Add styles
import Drawing from './components/drawing';
const draw = new Drawing('#drawing-svg');
import yourturnfile from '../assets/yourturn.ogg';
import { soundManager } from 'soundmanager2';
console.log('soundManager', soundManager);
var yourTurnAudio = new Audio(yourturnfile);
const audioTrigger = document.querySelector('.audio-icon');
audioTrigger.addEventListener('click', playSound, false);
function playSound(e) {
e.preventDefault();
soundManager.setup({
onready: function () {
console.log('soundready');
var mySound = soundManager.createSound({
url: './yourturn.ogg',
});
mySound.play();
},
});
}
const idContainer = document
.querySelector('.id-container')
.getBoundingClientRect().height;
......
......@@ -193,3 +193,13 @@ path.myTurn {
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.audio-icon {
height: 100%;
width: 100%;
display: flex;
align-items: center;
border: 1px dashed yellow;
border-radius: 50%;
justify-content: center;
}
......@@ -4,7 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // installed via npm
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
const CopyPlugin = require('copy-webpack-plugin');
const plugins = [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
......@@ -16,6 +16,7 @@ const plugins = [
filename: 'index.html',
favicon: './public/favicon.ico',
}),
new CopyPlugin([{ from: 'public/yourturn.ogg' }]),
];
module.exports = {
......
......@@ -6619,6 +6619,11 @@ sort-keys@^1.0.0:
dependencies:
is-plain-obj "^1.0.0"
soundmanager2@^2.97.20170602:
version "2.97.20170602"
resolved "https://registry.yarnpkg.com/soundmanager2/-/soundmanager2-2.97.20170602.tgz#fe3bc731bfc4d54c1364e71980263e6816981879"
integrity sha512-2ee7ES9SJ++WkD7PGHMeT4QUuJr7uC3wacD6RoCDlKjdSp9lpEOaKm3lKWKld119DLILjS2l9U6xpXJN6U0KPQ==
source-list-map@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment