Loading video...

Video Failed to Load

Go Home

I made a web app that visualises music in real time. Coded with ChatGPT 5.5 using JavaScript, HTML5 Canvas, and the Web Audio API. Sound on, please.

techartist_'s profile picture

Techartist

14,600 subscribers

11,177 views • 1 month ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Fun hack: A new way to inspect web with the html-in-canvas API
0:19

Fun hack: A new way to inspect web with the html-in-canvas API

tani

43,577 views • 4 months ago

i made Dumb Drum Revolution. smack everyday objects to create "music" built with: - roboflow RF-DETR for object detection - mediapipe hand tracking - web audio API and some drum samples runs in realtime in the browser for all your drumming needs
0:18

i made Dumb Drum Revolution. smack everyday objects to create "music" built with: - roboflow RF-DETR for object detection - mediapipe hand tracking - web audio API and some drum samples runs in realtime in the browser for all your drumming needs

AA

72,956 views • 5 months ago

Looking to build apps that can search the web, images, videos and more? Brave just made it incredibly simple to connect your Kiro projects with real-time access to the web using their latest MCP server for Brave Search. Learn more 👉
0:15

Looking to build apps that can search the web, images, videos and more? Brave just made it incredibly simple to connect your Kiro projects with real-time access to the web using their latest MCP server for Brave Search. Learn more 👉

Kiro

35,626 views • 1 year ago

MegaETH is now live on Uniswap Web App, Wallet, and API Swap and LP on one of the fastest chains in the world, with 100,000 TPS and 10ms block times
0:12

MegaETH is now live on Uniswap Web App, Wallet, and API Swap and LP on one of the fastest chains in the world, with 100,000 TPS and 10ms block times

Uniswap

73,600 views • 1 month ago

I recently ported BoltAI to the web platform and immediately ran into a technical challenge: How to store API keys securely? It's pretty straightforward for a native app but it's surprisingly challenging for a web app. I write a short post on my learnings below ↓
0:11

I recently ported BoltAI to the web platform and immediately ran into a technical challenge: How to store API keys securely? It's pretty straightforward for a native app but it's surprisingly challenging for a web app. I write a short post on my learnings below ↓

Daniel Nguyen

59,938 views • 4 months ago

🎊 After months of work SSGI is finally released! 🎊 ➡️ Global lllumination on the web in real-time ⮕ open-source on GitHub: #threejs #webgl #webdev #javascript #graphics
0:10

🎊 After months of work SSGI is finally released! 🎊 ➡️ Global lllumination on the web in real-time ⮕ open-source on GitHub: #threejs #webgl #webdev #javascript #graphics

0beqz

128,676 views • 3 years ago

ChatGPT 5.1 vs. Claude Opus 4.5 vs. DeepSeek-V3.2 (left) (middle) (right) prompt I used: Create a single HTML file containing a realistic cloth simulation using HTML5 Canvas and JavaScript. The cloth should be a grid of points connected by constraints using Verlet integration. Implement gravity and mouse interaction: the user should be able to click and drag particles to tear the cloth. The physics must remain stable without exploding.
0:13

ChatGPT 5.1 vs. Claude Opus 4.5 vs. DeepSeek-V3.2 (left) (middle) (right) prompt I used: Create a single HTML file containing a realistic cloth simulation using HTML5 Canvas and JavaScript. The cloth should be a grid of points connected by constraints using Verlet integration. Implement gravity and mouse interaction: the user should be able to click and drag particles to tear the cloth. The physics must remain stable without exploding.

God of Prompt

96,685 views • 8 months ago

As a learning test, I ported part of my 2D Cloth Physics Simulation to the web using #Rust 🦀 🧪 Try the mini demo: Real-time simulation with Verlet integration, touch/mouse interaction, and web delivery. #gamedev #physics #simulation #verletintegration
0:18

As a learning test, I ported part of my 2D Cloth Physics Simulation to the web using #Rust 🦀 🧪 Try the mini demo: Real-time simulation with Verlet integration, touch/mouse interaction, and web delivery. #gamedev #physics #simulation #verletintegration

Claudio Z.

90,876 views • 1 year ago

🎨 Rapidly prototype interactive 3D concepts with Gemini. Learn how to use Gemini in the Canvas web app to build 3D environments and interactive models using WebXR APIs. Start building → Explore more examples below 🧵
0:12

🎨 Rapidly prototype interactive 3D concepts with Gemini. Learn how to use Gemini in the Canvas web app to build 3D environments and interactive models using WebXR APIs. Start building → Explore more examples below 🧵

Google for Developers

30,520 views • 5 months ago

Unlock the power of JavaScript. With "JavaScript for Web Wizards"📕 ◈ Guides And Framework ◈ 70+ Theoretical Questions. ◈ 50+ JavaScript Exercises. ◈ Rapid Revision Grab it for FREE. Drop a 👋🏼 in the comments, Make sure you follow me, So that can DM You.
0:10

Unlock the power of JavaScript. With "JavaScript for Web Wizards"📕 ◈ Guides And Framework ◈ 70+ Theoretical Questions. ◈ 50+ JavaScript Exercises. ◈ Rapid Revision Grab it for FREE. Drop a 👋🏼 in the comments, Make sure you follow me, So that can DM You.

Mohd Rizwan Alam

28,619 views • 2 years ago

What if agents could just write to local files and changes show up in a real-time multiplayer web app?
0:12

What if agents could just write to local files and changes show up in a real-time multiplayer web app?

Wim Cools

17,602 views • 2 months ago

ok anything ai is actually insane it just one shot this app that scrapes google maps for local business email leads i just took a n8n json file and told anything to build a web app based on this logic it one shot a functioning web app with like 3 databases and web scraping this is actually crazy
0:19

ok anything ai is actually insane it just one shot this app that scrapes google maps for local business email leads i just took a n8n json file and told anything to build a web app based on this logic it one shot a functioning web app with like 3 databases and web scraping this is actually crazy

Cody Schneider

87,713 views • 1 year ago

Every time a sale is made on Shopify this Black Friday weekend, it shows up on this 3D globe. It runs at 120fps in the web with a full 3D environment, physics engine, music synth, VR support, and more. It’s hard to believe it's a React app 👀🧵
0:15

Every time a sale is made on Shopify this Black Friday weekend, it shows up on this 3D globe. It runs at 120fps in the web with a full 3D environment, physics engine, music synth, VR support, and more. It’s hard to believe it's a React app 👀🧵

Daniel Beauchamp

464,486 views • 1 year ago

Earn is now live on Uniswap Web App and Wallet Deposit USDC, USDT, or ETH and put your assets to work in just a few steps Earnings grow in real-time, with no lock-ups on withdrawals
0:15

Earn is now live on Uniswap Web App and Wallet Deposit USDC, USDT, or ETH and put your assets to work in just a few steps Earnings grow in real-time, with no lock-ups on withdrawals

Uniswap

222,401 views • 9 days ago

What if there were a user-friendly web app that made writing, formatting, and structuring your resume super easy? Here's a preview of a side project I've been working on (using the excellent shadcn ui of course).
0:18

What if there were a user-friendly web app that made writing, formatting, and structuring your resume super easy? Here's a preview of a side project I've been working on (using the excellent shadcn ui of course).

Houssein Djirdeh

84,943 views • 2 years ago

GPT 5.5 Pro (spud in web) makes realistic ocean water + boat physics in threejs "generate ultra realistic water in threejs with a boat on it and occasional waves hitting it, real physics" not bad
0:16

GPT 5.5 Pro (spud in web) makes realistic ocean water + boat physics in threejs "generate ultra realistic water in threejs with a boat on it and occasional waves hitting it, real physics" not bad

jasper

22,446 views • 3 months ago

What I love about Replit ⠕. Low floor to get started. Ultra high ceiling for what you can build. I told Agent to build a native C application that runs on my desktop without a web browser - AND compile it into JavaScript to run in the web browser. Here's a video showing both running
0:15

What I love about Replit ⠕. Low floor to get started. Ultra high ceiling for what you can build. I told Agent to build a native C application that runs on my desktop without a web browser - AND compile it into JavaScript to run in the web browser. Here's a video showing both running

jordwalke

43,739 views • 6 months ago

DOM3 is made from HTML, CSS and Javascript, closer to a document than a canvas. It's a strange contemporary material that shapes much of our digital lives. The rhythm of endless creation and deletion in DOM3 is a self-driving version of what happens when you browse the web. "The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory." A html element, and a rectangle on a canvas, are not the same thing. It's a different material. Even if it all ends up controlling the same pixels, the process is different. The html element kind of actually exists, in this abstract context of a document object model. And in memory, in the moment. If it was possible to measure its weight, it would be heavier than a pixel on a canvas.
0:18

DOM3 is made from HTML, CSS and Javascript, closer to a document than a canvas. It's a strange contemporary material that shapes much of our digital lives. The rhythm of endless creation and deletion in DOM3 is a self-driving version of what happens when you browse the web. "The Document Object Model (DOM) connects web pages to scripts or programming languages by representing the structure of a document—such as the HTML representing a web page—in memory." A html element, and a rectangle on a canvas, are not the same thing. It's a different material. Even if it all ends up controlling the same pixels, the process is different. The html element kind of actually exists, in this abstract context of a document object model. And in memory, in the moment. If it was possible to measure its weight, it would be heavier than a pixel on a canvas.

Leander Herzog

11,484 views • 10 months ago

I've just built a Newsletter Generator! 📰 It creates newsletters in seconds using real-time web search. Here’s the stack used: - 's Search API - Agno For Agents - Nebius Token Factory for LLMs - Streamlit for Ui Watch it in action 👇🏼
0:19

I've just built a Newsletter Generator! 📰 It creates newsletters in seconds using real-time web search. Here’s the stack used: - 's Search API - Agno For Agents - Nebius Token Factory for LLMs - Streamlit for Ui Watch it in action 👇🏼

Arindam Majumder 𝕏

11,535 views • 1 year ago