-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
96 lines (89 loc) · 3.54 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
<html>
<head>
<title>webletime</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="webletime - speeds up your audio" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
</head>
<body class="bg-light mt-5 mx-5">
<div class="row d-flex justify-content-center text-center">
<div class="col-md-6">
<h3 class="text-center">webletime</h3>
<p class="text-center">set speed and select audio file</p>
<br>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<br>
<div>
<audio id="output-video" controls></audio>
</div>
<br>
<input type="file" id="uploader" class="form-control">
<br>
<!--
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Tempo</span>
<input type="number" class="form-control">
</div>
-->
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Speed</span>
<input required value="1.5" type="number" id="speed" class="form-control">
</div>
</div>
<br>
<div>
<!-- <button class="btn btn-outline-primary" onClick="cancel()">Cancel</button> -->
</div>
<br>
<div>
<p id="message"></p>
</div>
</div>
</div>
<script>
const { createFFmpeg, fetchFile } = FFmpeg
let ffmpeg = null
const message = document.getElementById("message")
const progress = document.querySelector(".progress-bar")
const speed = document.getElementById("speed").value
const transcode = async ({ target: { files } }) => {
if (ffmpeg === null) {
ffmpeg = createFFmpeg({
progress: p => {
const _progress = p.ratio * 100
progress.innerHTML = `${_progress.toFixed()}%`
progress.style.width = `${_progress}%`
}
})
}
const { name } = files[0]
if (!ffmpeg.isLoaded()) {
await ffmpeg.load()
}
ffmpeg.setLogger((log) => {
message.innerHTML = log.message
})
ffmpeg.FS("writeFile", name, await fetchFile(files[0]))
await ffmpeg.run("-i", name, "-filter:a", `atempo=${speed}`, "-c:a", "pcm_s32le", "output.wav")
const data = ffmpeg.FS("readFile", "output.wav")
const video = document.getElementById("output-video")
video.src = URL.createObjectURL(new Blob([data.buffer], { type: "audio/wav" }))
}
const elm = document.getElementById("uploader")
elm.addEventListener("change", transcode)
const cancel = () => {
try {
ffmpeg.exit()
message.innerHTML = "Cancelled transcoding"
} catch (e) { }
ffmpeg = null
}
</script>
</body>
</html>