vudio
Version:
visualization audio using AudioContext and Canvas
283 lines (282 loc) • 9.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vudio Demo</title>
<style>
html,body{
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: radial-gradient(#305670, #010609);
transition: all 1.5s ease;
}
.container{
position: relative;
width: 100%;
height: 100%;
}
.github-corner {
z-index: 99;
}
#bg {
position: absolute;
width: 100%;
height: 100%;
/* background-image: url('./demo_src/cover.jpg'); */
background-size: cover;
background-position: center;
filter: blur(50px);
}
#canvas {
position: absolute;
top: 20%;
left: 10%;
width: 80%;
height: 60%;
}
#audioFile {
position: absolute;
width: 100%;
height: 88px;
opacity: 0;
}
.label {
position: absolute;
text-align: center;
height: 85px;
width: 100%;
color: #eee;
font-size: 24px;
font-family: 'Courier New', Courier, monospace;
font-weight: 700;
opacity: .3;
border-radius: 8px;
border: 1px dashed #ccc;
}
.controller{
position: absolute;
z-index: 5;
bottom: 40px;
left: 0;
width: 100%;
height: 40px;
text-align: center;
}
.controller div{
display: inline-block;
height: 40px;
margin: 0 10px;
}
.controller button{
display: block;
float: left;
height: 40px;
margin: 0 1px;
padding: 0 15px;
color: #fff;
background-color: rgba(255,255,255,.2);
border-radius: 12px;
border: none;
outline: none;
}
.controller button:hover{
opacity: .6;
}
.color-1{
background-image: linear-gradient(#f00 0%, #f00 30%, #f90 30%, #f90 70%, #ff0 70%, #ff0 100%);
}
button.color-2{
background-color: #ff0;
}
.color-3{
background-image: linear-gradient(#00f, #06f, #09f, #0ff);
}
.color-4{
background-image: linear-gradient(#fb6d6b, #c10056, #a50053, #51074b);
}
.color-5{
background-image: linear-gradient(#ff422d 0%, #ff422d 50%, #6072ff 50%, #6072ff 100%);
}
</style>
</head>
<body>
<a href="https://github.com/alex2wong/vudio" aria-label="Open GitHub project"><svg class="github-corner" width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 0px; fill: '#333'; right: 0px;"><path class="octo-banner" d="M0 0l115 115h15l12 27 108 108V0z" fill='#333'></path><path class="octo-arm" fill="#eee" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="transform-origin: 130px 106px;"></path><path class="octo-body" fill="#eee" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"></path></svg></a>
<div class="container">
<img id="bg"/>
<canvas id="canvas"></canvas>
<audio id="audio" src="./demo_src/nuanchun.mp3" preload="auto"></audio>
<label class="label" for="audioFile" id="audioLabel">Drop audio file here to play</label>
<input type="file" name="audioFile" id="audioFile" onchange="vudio.readAudioSrc(this,vudio,document.querySelector('#audioLabel'))" accept="audio/*">
</div>
<div class="controller">
<!-- <div>
<button onclick="(function(){ audio.play();vudio.dance(); })()">Play</button>
<button onclick="audio.pause()">Pause</button>
</div>
<div>
<button onclick="vudio.dance()">Dance</button>
<button onclick="vudio.pause()">Stop</button>
<button onclick="prettifyWaveform()">Beautify</button>
</div> -->
<div>
<button class="type type-1" onclick="changeType(0)">Wave</button>
<button class="type type-2" onclick="changeType(1)">Circular</button>
<button class="type type-3" onclick="changeType(2)">Lighting</button>
<button class="type type-4" onclick="changeType(3)">Circular2</button>
</div>
<div>
<button class="color color-1" onclick="changeColor(0)"></button>
<button class="color color-2" onclick="changeColor(1)"></button>
<button class="color color-3" onclick="changeColor(2)"></button>
<button class="color color-4" onclick="changeColor(3)"></button>
<button class="color color-5" onclick="changeColor(4)"></button>
</div>
<div>
<button class="pos-v" onclick="changePosV('top')">Top</button>
<button class="pos-v" onclick="changePosV('middle')">Medium</button>
<button class="pos-v" onclick="changePosV('bottom')">Down</button>
</div>
<div>
<button class="pos-h" onclick="changePosH('left')">Left</button>
<button class="pos-h" onclick="changePosH('center')">Medium</button>
<button class="pos-h" onclick="changePosH('right')">Right</button>
</div>
</div>
<script src="./src/particle.js"></script>
<script src="./vudio.js"></script>
<script>
var colors = [
[
[0, '#f00'],
[0.3, '#f00'],
[0.3, '#f90'],
[0.7, '#f90'],
[0.7, '#ff0'],
[1, '#ff0']
],
'#ff0',
['#06f', '#09f',' #0Cf', '#0ff'],
['#fb6d6b', '#c10056',' #a50053', '#51074b'],
[
[0, '#ff422d'],
[0.5, '#ff422d'],
[0.5, '#6072ff'],
[1, '#6072ff']
]
];
var types = ['waveform', 'circlebar','lighting', 'circlewave'];
var prettify = false;
var canvas = $('#canvas');
var audio = $('#audio');
var vudio = new Vudio(audio, canvas, {
effect: 'circlewave',
accuracy: 128,
circlebar: {
maxHeight : 40,
fadeSide: true,
particle: false,
shadowBlur : 4,
shadowColor: 'rgba(244,244,244,.5)',
coverImg: './demo_src/nuanchun.jpg',
},
circlewave: {
fadeSide: true,
maxParticle: 50,
shadowBlur : 4,
shadowColor: 'rgba(244,244,244,.5)',
coverImg: './demo_src/nuanchun.jpg',
},
waveform: {
maxHeight : 160,
spacing : 1,
shadowBlur: 6,
shadowColor : 'rgba(255,21,10,0.6)',
prettify: true,
fadeSide: true,
color: [
[0, '#f00'],
[0.3, '#f00'],
[0.3, '#f90'],
[0.7, '#f90'],
[0.7, '#ff0'],
[1, '#ff0']
]
},
lighting: {
lineWidth: 1,
maxSize: 12,
dottify: true,
fadeSide: true,
prettify: false,
color : '#49f3f7',
shadowBlur : 2,
shadowColor: 'rgba(244,244,244,.5)',
}
});
vudio.dance();
function $(selector) {
return document.querySelector(selector);
}
function changeType(index) {
vudio.setOption({
effect: types[index]
});
}
function changeColor(index) {
vudio.setOption({
waveform : {
color: colors[index]
},
circlewave : {
color: colors[index]
},
circlebar : {
color: colors[index]
},
lighting: {
color: colors[index]
}
});
}
function changePosV(type) {
var option = {
verticalAlign: type,
fadeSide: true
};
vudio.setOption({
waveform : option,
lighting: option,
});
}
function changePosH(type) {
var option = {
horizontalAlign: type,
fadeSide: true
};
vudio.setOption({
waveform : option,
lighting: option,
});
}
function prettifyWaveform() {
vudio.setOption({
waveform : {
prettify: prettify
},
circlewave : {
prettify: prettify
},
circlebar : {
prettify: prettify
},
});
prettify = !prettify;
}
</script>
</body>
</html>