Skip to content

Commit 3b33e5c

Browse files
HoangTran0410HoangTran0410
committed
WIP - visualize music
1 parent dc11e40 commit 3b33e5c

File tree

6 files changed

+140
-5
lines changed

6 files changed

+140
-5
lines changed

‎public/music-visualizer/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.3/lib/p5.js"></script>
9+
<script src="./main.js"></script>
10+
</head>
11+
12+
<body>
13+
</body>
14+
15+
</html>

‎public/music-visualizer/main.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
window.onload = () => {
2+
checkHref(location.href);
3+
};
4+
5+
function checkHref(href) {
6+
const streamId = new URL(href).searchParams.get("streamId");
7+
if (streamId) {
8+
start(streamId);
9+
}
10+
}
11+
12+
function start(streamId) {
13+
navigator.webkitGetUserMedia(
14+
{
15+
audio: {
16+
mandatory: {
17+
chromeMediaSource: "tab", // The media source must be 'tab' here.
18+
chromeMediaSourceId: streamId,
19+
},
20+
},
21+
video: false,
22+
},
23+
function (stream) {
24+
draw(stream);
25+
},
26+
function (error) {
27+
console.error(error);
28+
}
29+
);
30+
}
31+
32+
function draw(stream) {
33+
// at this point the sound of the tab becomes muted with no way to unmute it
34+
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
35+
const source = audioCtx.createMediaStreamSource(stream);
36+
const analyser = audioCtx.createAnalyser();
37+
analyser.fftSize = 2048;
38+
const bufferLength = analyser.frequencyBinCount;
39+
const dataArray = new Uint8Array(bufferLength);
40+
source.connect(analyser);
41+
analyser.connect(audioCtx.destination);
42+
43+
const canvas = document.createElement("canvas");
44+
canvas.width = 800;
45+
canvas.height = 200;
46+
canvas.style.cssText =
47+
"position: fixed; top: 0; left: 0; z-index: 2147483647; background: #333a;";
48+
document.body.appendChild(canvas);
49+
const canvasCtx = canvas.getContext("2d");
50+
51+
function draw() {
52+
analyser.getByteFrequencyData(dataArray);
53+
canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
54+
canvasCtx.beginPath();
55+
const barWidth = ~~(bufferLength / canvas.width);
56+
for (let x = 0; x < canvas.width; x++) {
57+
let i = x * barWidth;
58+
let item = dataArray[i];
59+
const barHeight = map(item, 0, 255, 0, canvas.height);
60+
canvasCtx.lineTo(x, canvas.height - barHeight);
61+
}
62+
canvasCtx.strokeStyle = "rgba(255, 255, 255, 0.9)";
63+
canvasCtx.stroke();
64+
requestAnimationFrame(draw);
65+
}
66+
67+
function map(x, in_min, in_max, out_min, out_max) {
68+
return ((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
69+
}
70+
71+
requestAnimationFrame(draw);
72+
}

‎scripts/_test.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Document</title>
88

9+
<!-- <script src="./content-scripts/ufs_global.js"></script> -->
910
<script src="./_test_main.js"></script>
1011
</head>
1112

‎scripts/_test.js

Lines changed: 42 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import {
2+
getCurrentTab,
3+
runScriptInTab,
4+
waitForTabToLoad,
5+
} from "./helpers/utils.js";
6+
17
export default {
28
icon: "",
39
name: {
@@ -20,7 +26,41 @@ export default {
2026
// https://groups.google.com/a/chromium.org/g/chromium-extensions/c/ffI0iNd79oo
2127
// https://github.dev/GoogleChrome/chrome-extensions-samples/api-samples/tabCapture
2228

23-
onClickContentScript: async () => {
29+
onClickExtension: async () => {
30+
try {
31+
// const url = "http://127.0.0.1:5500/public/music-visualizer/index.html";
32+
const url = await chrome.runtime.getURL(
33+
"/public/music-visualizer/index.html"
34+
);
35+
const currentTab = await getCurrentTab();
36+
const newTab = await chrome.tabs.create({
37+
url: url,
38+
active: false,
39+
});
40+
await waitForTabToLoad(newTab.id);
41+
42+
const streamId = await chrome.tabCapture.getMediaStreamId({
43+
targetTabId: currentTab.id,
44+
consumerTabId: newTab.id,
45+
});
46+
47+
chrome.tabs.update(newTab.id, {
48+
url: url + "?streamId=" + streamId,
49+
});
50+
51+
// runScriptInTab({
52+
// tabId: newTab.id,
53+
// func: (streamId) => {
54+
// start(streamId);
55+
// },
56+
// args: [streamId],
57+
// });
58+
} catch (e) {
59+
alert(e);
60+
}
61+
},
62+
63+
_onClickContentScript: async () => {
2464
try {
2565
const currentTabId = await UfsGlobal.Extension.runInBackground(
2666
"utils.getCurrentTabId"
@@ -33,9 +73,7 @@ export default {
3373
);
3474
const tab = tabs[0];
3575

36-
await UfsGlobal.Extension.runInBackground("utils.waitForTabToLoad", [
37-
tab.id,
38-
]);
76+
await UfsGlobal.Extension.waitForTabToLoad(tab.id);
3977

4078
UfsGlobal.Extension.runInBackground("chrome.tabs.sendMessage", [
4179
tab.id,

‎scripts/_test_main.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@ chrome.runtime.onMessage.addListener(function (request) {
55

66
function testGetMediaStreamId(targetTabId, consumerTabId) {
77
chrome.tabCapture.getMediaStreamId(
8-
{ targetTabId, consumerTabId },
8+
{
9+
targetTabId,
10+
consumerTabId,
11+
},
912
function (streamId) {
1013
if (!streamId) return;
14+
1115
navigator.webkitGetUserMedia(
1216
{
1317
audio: {

‎scripts/content-scripts/ufs_global.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ UfsGlobal.Extension = {
6363
trackEvent(scriptId) {
6464
return UfsGlobal.Extension.runInBackground("trackEvent", [scriptId]);
6565
},
66+
waitForTabToLoad(tabId) {
67+
return UfsGlobal.Extension.runInBackground("utils.waitForTabToLoad", [
68+
tabId,
69+
]);
70+
},
6671
};
6772
UfsGlobal.DOM = {
6873
addLoadingAnimationAtPos(

0 commit comments

Comments
 (0)