-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
156 lines (142 loc) · 5.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webassembly MP3 Encoder(192kbps)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="assets/bootstrap.min.css">
<link rel="stylesheet" href="assets/common.css">
<script>
let Instance;
var Module = {
onRuntimeInitialized: async function () {
Instance = {
encode: Module.cwrap('encode', "number", ["number","number","number","number","number"], {async: true})
}
await main().catch(err => {
console.error(err);
process.exit(1);
});
},
print: function(text) { console.log(text); },
printErr: function(text) { console.log(text); }
};
</script>
<script src="wasm/encodeMp3.js"></script>
<script src="mp3.js"></script>
</head>
<body>
<script>
let audioCtx;
let message;
const message_color = Object.freeze({
error: 'align-middle alert alert-danger',
warning: 'align-middle alert alert-warning',
success: 'align-middle alert alert-warning',
default: 'align-middle',
});
async function main() {
message = document.getElementById("message");
if (!audioCtx) {
audioCtx = new AudioContext();
// await loadAudio();
}
}
const reader = new FileReader();
reader.addEventListener("progress", readerEvent);
function readerEvent(event) {
message.innerText = "fileReading: " + event.loaded;
}
async function handleFiles(files) {
reader.onload = async function(e) {
decodeAudioData(e.target.result);
}
reader.readAsArrayBuffer(files[0])
}
// Debug
async function loadAudio(){
try {
// const name = "test_long3.mp4";
const name = "test.wav";
const response = await fetch(name);
decodeAudioData(await response.arrayBuffer());
} catch (err) {
decodeError(err);
}
}
function decodeAudioData(arrayBuffer){
try {
let text = "DecodeAudioData Start ";
text += '<span class="spinner-border spinner-border-sm text-success" role="status">';
text += '<span class="visually-hidden"></span>';
text += '</span>';
putMessage(text, message_color.default);
audioCtx.decodeAudioData(arrayBuffer, transcode, decodeError);
} catch (err) {
decodeError(err);
}
}
function decodeError(error){
putMessage('DecodeAudioData processing failed. This file is not available.', message_color.error);
console.error(`Unable to fetch the audio file. Error: ${error.message}`);
}
async function transcode(audioBuffer){
const bitrate = 192;
const vbr = 0;
buildMp3(audioBuffer, bitrate, vbr).then(mp3bin =>{
if (!mp3bin){ return }
let audioBlob = URL.createObjectURL(new Blob([mp3bin], { type: 'audio/mpeg' }));
const downloadLink = document.getElementById('download');
downloadLink.href = audioBlob;
downloadLink.download = 'output.mp3';
downloadLink.style.display = 'inline';
const audio = document.getElementById('output-audio');
audio.src = audioBlob;
audio.style.display = 'inline';
document.getElementsByClassName('progress-bar').item(0).setAttribute('class','progress-bar');
});
}
function putMessage(text, color=message_color.default){
message.setAttribute('class', color);
document.getElementById("message").innerHTML = text;
}
</script>
<div class="container mt-5">
<h1>Webassembly MP3 Encoder(192kbps)</h1>
<div class="card">
<div class="card-body">
<div id="drop-area" class="border rounded d-flex justify-content-center align-items-center"
style="height: 200px; cursor: pointer;">
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-cloud-arrow-up-fill text-primary" viewBox="0 0 16 16">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0z"/>
</svg>
<p class="mt-3">Drag and drop your video file here or Click to select the file.</p>
</div>
</div>
<input type="file" id="fileElem" accept="video/*" class="d-none">
</div>
</div>
<div class="mt-5">
<p id="message"></p>
<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>
</div>
</div>
<div id="progress"></div>
<div class="mt-5 d-flex flex-row align-items-center justify-content-center">
<div class="p-2">
<audio id="output-audio" controls style="display: none;"></audio>
</div>
<div class="p-2">
<a id="download" class="btn btn-primary btn-lg" role="button" style="display: none;">Download</a>
</div>
</div>
<div id="content"></div>
</div>
<script src="assets/dropui.js"></script>
<footer>
<p>Author: <a href="https://github.com/otmb/LAMEMP3Encoder">https://github.com/otmb/LAMEMP3Encoder</a></p>
</footer>
</body>
</html>