vudio.js
Version:
187 lines • 5.04 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vudio Demo</title>
<style>
html,body{
box-sizing: border-box;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #51074b;
}
body{
}
.container{
position: relative;
width: 100%;
height: 100%;
}
#canvas{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.controller{
position: absolute;
z-index: 5;
bottom: 30px;
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 20px;
color: #fff;
background-color: rgba(255,255,255,.2);
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>
<div class="container">
<canvas id="canvas"></canvas>
<audio id="audio" src="./demo_src/Happy Corporate Ukulele & Whistle.mp3"></audio>
</div>
<div class="controller">
<div>
<button onclick="audio.play()">播放音乐</button>
<button onclick="audio.pause()">暂停音乐</button>
</div>
<div>
<button onclick="vudio.dance()">播放效果</button>
<button onclick="vudio.pause()">暂停效果</button>
<button onclick="prettifyWaveform()">美化效果</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')">上</button>
<button class="pos-v" onclick="changePosV('middle')">中</button>
<button class="pos-v" onclick="changePosV('bottom')">下</button>
</div>
<div>
<button class="pos-h" onclick="changePosH('left')">左</button>
<button class="pos-h" onclick="changePosH('center')">中</button>
<button class="pos-h" onclick="changePosH('right')">右</button>
</div>
</div>
<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',
['#00f', '#06f',' #09f', '#0ff'],
['#fb6d6b', '#c10056',' #a50053', '#51074b'],
[
[0, '#ff422d'],
[0.5, '#ff422d'],
[0.5, '#6072ff'],
[1, '#6072ff']
]
];
var prettify = false;
var canvas = $('#canvas');
var audio = $('#audio');
var vudio = new Vudio(audio, canvas, {
effect: 'waveform',
accuracy: 256,
width: 1024,
height: 600,
waveform: {
maxHeight : 100,
color: [
[0, '#f00'],
[0.3, '#f00'],
[0.3, '#f90'],
[0.7, '#f90'],
[0.7, '#ff0'],
[1, '#ff0']
]
}
});
vudio.dance();
function $(selector) {
return document.querySelector(selector);
}
function changeColor(index) {
vudio.setOption({
waveform : {
color: colors[index]
}
});
}
function changePosV(type) {
vudio.setOption({
waveform : {
verticalAlign: type,
fadeSide: true
}
});
}
function changePosH(type) {
vudio.setOption({
waveform : {
horizontalAlign: type,
fadeSide: true
}
});
}
function prettifyWaveform() {
vudio.setOption({
waveform : {
prettify: prettify
}
});
prettify = !prettify;
}
</script>
</body>
</html>