Audio visualization English Version

•

1 gefällt mir•597 views

Kuan Sheng

HTML5 Audio Visualization

Technologie

Who am I ?
• Kuan Min Sheng a.k.a kmsheng
• Worked for MOXA and PIXNET as a
Software Engineer
• Loves drawing, skateboarding and
cooking

• Wanted to create unique web component !
• !Study HTML5 Web Audio API!
• Enjoy the joy of coding
Why would I want to implement
my own audio player?

AudioContext.createScriptProcessor
AnalyserNode.getByteFrequencyData
ScriptProcesscorNode.onaudioprocess
Notice! In safari all elements in a channel array are 0

<ks-stereo>
<ks-icosahedron></ks-icosahedron>
<ks-vinyl></ks-vinyl>
<music-control></music-control>
</ks-stereo>
NOTE: icosahedron and vinyl take cares of drawing only

Vinyl
Icosahedron
Stereo
Helper
Math Util
Animation
music
control
Audio
Enable Audio Context
Canvas Util
Three
Renderer
Detector
Cache

Checking if the mouse is inside a circle

Given coordinates of a circle’s center and
central angle G, ﬁnd point (x3, y3)
( x3, y3 )
( x1, y1 )
G

context.arc(x, y, radius, 0, RADIAN * progress)
RADIAN = Math.PI * 2

context.ﬁllStyle = ‘rgba(r, g, b, a)’
i^2

The devil is in the details.
Simulate press and release
behaviors
mouseup event optimization
(mousedown in circle and allow
mouseup triggers outside of circle)

fallback
Modernizr.audio
Modernizr.webaudio && (! Modernizr.touch)

• browser memory leak!
• cross browser support & fallback!
• custom cursor loading issue!
• html canvas animation stutter!
• responsive handling!
• webgl context gc bug
Issues you may experience when
creating an audio visualization

https://github.com/
kmsheng/angular-ks-
stereo
Pull Requests & Issues Welcome !

Feel free to contact
me via my website
純

https://developer.mozilla.org/en-US/docs/Web/API/
ScriptProcessorNode
https://developer.mozilla.org/en-US/docs/Web/API/
AudioContext.createScriptProcessor
http://codepen.io/soulwire/pen/Dscga
https://developer.mozilla.org/en-US/docs/Web/Guide/
Events/Media_events
http://kenjiendo.com
Reference

Weitere ähnliche Inhalte

Ähnlich wie Audio visualization English Version

Game dev. story

Phenix Yu

Do you feel like you’re not taking advantage of your tablet or smartphone outside of email, text messaging, and a couple apps? Mobile devices can be much more than tools to consume content and conduct conversations. Your mobile device is armed and ready to not only uncover learning opportunities but also help create them. In this session, you will learn about several amazing apps that will provide new ways for you to explore, learn, and create new content for your learners. The session will examine the various ways you can not only move content on and off your device but also edit it. You will leave this session with new applications, ideas, and approaches to maximize the potential of your best device for learning today! In this session, you will learn: > How to take advantage of your mobile device > New ways to be creative with your tablet and phone > About new apps and tools to add creative splash to your content How to create, edit, and move content on and off your device

Design, Create & Explore Learning with Your Mobile Devices

Nick Floro

[COSCUP 2013] Audio Competing

Alive Kuo

A Holistic Approach to HTML5 Game Design & Development

Karl Bunyan

Audio design remains one of the trickiest aspects to creating a good virtual or mixed reality piece. One of the leading audio producers experimenting with this new format, Nick LaMartina, will walk through the current state of the art, leading a discussion around how creators have approached audio design and what questions remain on the table. NOTE: This is a technical session designed for practitioners.

VR Technical Session: Spatialized Audio Design

Online News Association

K2P workshop 3-23-13

FakeGreenDress

TMD2063 | Digital Animation - Chapter 3

Diyana Harithuddin

David Silverlight's powerpoint presentation on the Kinect for Windows SDK. Feb. 29, 2012 NUI = Natural User Interface: it's an invisible interface, the content is the interface, removing the proxy, direct manipulation, gestural interfaces Kinect for Windows SDK: 1. Kinect explorer 2. Installing & using the Kinect sensor 3. Setting up your dev environment 4. Skeletal tracking fundamentals 5. Working with depth data 6. Audio fundamentals 7. Camera fundamentals

Building Applications with the Microsoft Kinect SDK

DataLeader.io

Distributed high-quality image manipulation and review in a virtual collabora...

ETCenter

Animation part3 d

Kulu Studio

Animation

Uma mohan

Ghajini - The Game Development

Imran K

A talk from the Design Track at AWE USA 2018 - the World's #1 XR Conference & Expo in Santa Clara, California May 30- June 1, 2018. Phillip Heckinger (Microsoft): Empowering AR & VR with Tech Art Building the future with Hololens, Windows Mixed Reality and Mixed Reality Toolkit! How Tech Art helped accelerate and amplify products, with behind the scenes examples and learnings from 6 years of Microsoft AR & VR work http://AugmentedWorldExpo.com

Phillip Heckinger (Microsoft): Empowering AR & VR with Tech Art

AugmentedWorldExpo

Josh Hickman, Digital Resources Librarian, Beloit College This is the first part of a two-part, full-day workshop introducing the core elements of creating digital collections of historic photographs, documents and other archival materials. Part 1 focuses on selecting materials to digitize and the basics of reformatting. We’ll start with some recommendations for planning a successful project and consider how your digital collections can fit into the statewide and national landscape of digital content. We’ll discuss copyright concerns in order to help you answer the question “CAN I put this online?” And we’ll explore the vocabulary of digital images, including pixels, resolution and bit depth as well as tools and best practices for scanning photographs and documents.

Digitization Basics for Archives and Special Collections – Part 1: Select and...

WiLS

OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang

ogdc

Ogdc 2013 cross platform game development with html5

Son Aris

Jancke kinect programming

jose basto

Confrontation Pipeline and SCons

slantsixgames

An up-to-date overview of our recent research on music/audio and AI. It contains four parts: * AI Listener: source separation (ICMLA'18a) and sound event detection (IJCAI'18) * AI DJ: music thumbnailing (TISMIR'18) and music sequencing (AAAI'18a) * AI Composer: melody generation (ISMIR'17), lead sheet generation (ICMLA'18b), multitrack pianoroll generation (AAAI'18b), and instrumentation generation (arxiv) * AI Performer: CNN-based score-to-audio generation (AAAI'19)

Machine learning for creative AI applications in music (2018 nov)

Yi-Hsuan Yang

What have you learnt about technologies from the process of constructing the ...

mediastudiesfinearts

Ähnlich wie Audio visualization English Version (20)

Game dev. story

Design, Create & Explore Learning with Your Mobile Devices

[COSCUP 2013] Audio Competing

A Holistic Approach to HTML5 Game Design & Development

VR Technical Session: Spatialized Audio Design

K2P workshop 3-23-13

TMD2063 | Digital Animation - Chapter 3

Building Applications with the Microsoft Kinect SDK

Distributed high-quality image manipulation and review in a virtual collabora...

Animation part3 d

Animation

Ghajini - The Game Development

Phillip Heckinger (Microsoft): Empowering AR & VR with Tech Art

Digitization Basics for Archives and Special Collections – Part 1: Select and...

OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang

Ogdc 2013 cross platform game development with html5

Jancke kinect programming

Confrontation Pipeline and SCons

Machine learning for creative AI applications in music (2018 nov)

What have you learnt about technologies from the process of constructing the ...

Kürzlich hochgeladen

Following the popularity of "Cloud Revolution: Exploring the New Wave of Serverless Spatial Data," we're thrilled to announce this much-anticipated encore webinar. In this sequel, we'll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you're building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Three things you will take away from the session: • How to run an effective tenant-to-tenant migration • Best practices for before, during, and after migration • Tips for using migration as a springboard to prepare for Copilot in Microsoft 365 Main ideas: Migration Overview: The presentation covers the current reality of cross-tenant migrations, the triggers, phases, best practices, and benefits of a successful tenant migration Considerations: When considering a migration, it is important to consider the migration scope, performance, customization, flexibility, user-friendly interface, automation, monitoring, support, training, scalability, data integrity, data security, cost, and licensing structure Next Wave: The next wave of change includes the launch of Copilot, which requires businesses to be prepared for upcoming changes related to Copilot and the cloud, and to consolidate data and tighten governance ShareGate: ShareGate can help with pre-migration analysis, configurable migration tool, and automated, end-user driven collaborative governance

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

sammart93

Boost Fertility New Invention Ups Success Rates.pdf

sudhanshuwaghmare1

When you’re building (micro)services, you have lots of framework options. Spring Boot is no doubt a popular choice. But there’s more! Take Quarkus, a framework that’s considered the rising star for Kubernetes-native Java. It always depends on what's best for your situation, but how to choose the best solution if you're comparing 2 frameworks? Both Spring Boot and Quarkus have their positives and negatives. Let us compare the two by live coding a couple of common use cases in Spring Boot and Quarkus. After this talk, you’ll be ready to get started with Quarkus yourself, and know when to select Quarkus or Spring Boot.

Spring Boot vs Quarkus the ultimate battle - DevoxxUK

Jago de Vreede

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Product Anonymous

Axa Assurance Maroc - Insurer Innovation Award 2024

The Digital Insurer

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

Zilliz

FWD Group - Insurer Innovation Award 2024

The Digital Insurer

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Following the popularity of “Cloud Revolution: Exploring the New Wave of Serverless Spatial Data,” we’re thrilled to announce this much-anticipated encore webinar. In this sequel, we’ll dive deeper into the Cloud-Native realm by uncovering practical applications and FME support for these new formats, including COGs, COPC, FlatGeoBuf, GeoParquet, STAC, and ZARR. Building on the foundation laid by industry leaders Michelle Roby of Radiant Earth and Chris Holmes of Planet in the first webinar, this second part offers an in-depth look at the real-world application and behind-the-scenes dynamics of these cutting-edge formats. We will spotlight specific use-cases and workflows, showcasing their efficiency and relevance in practical scenarios. Discover the vast possibilities each format holds, highlighted through detailed discussions and demonstrations. Our expert speakers will dissect the key aspects and provide critical takeaways for effective use, ensuring attendees leave with a thorough understanding of how to apply these formats in their own projects. Elevate your understanding of how FME supports these cutting-edge technologies, enhancing your ability to manage, share, and analyze spatial data. Whether you’re building on knowledge from our initial session or are new to the serverless spatial data landscape, this webinar is your gateway to mastering cloud-native formats in your workflows.

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Safe Software

Angeliki Cooney has spent over twenty years at the forefront of the life sciences industry, working out of Wynantskill, NY. She is highly regarded for her dedication to advancing the development and accessibility of innovative treatments for chronic diseases, rare disorders, and cancer. Her professional journey has centered on strategic consulting for biopharmaceutical companies, facilitating digital transformation, enhancing omnichannel engagement, and refining strategic commercial practices. Angeliki's innovative contributions include pioneering several software-as-a-service (SaaS) products for the life sciences sector, earning her three patents. As the Senior Vice President of Life Sciences at Avenga, Angeliki orchestrated the firm's strategic entry into the U.S. market. Avenga, a renowned digital engineering and consulting firm, partners with significant entities in the pharmaceutical and biotechnology fields. Her leadership was instrumental in expanding Avenga's client base and establishing its presence in the competitive U.S. market.

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

Angeliki Cooney

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

In the thrilling conclusion to 2023, ransomware groups had a banner year, really outdoing themselves in the "make everyone's life miserable" department. LockBit 3.0 took gold in the hacking olympics, followed by the plucky upstarts Clop and ALPHV/BlackCat. Apparently, 48% of organizations were feeling left out and decided to get in on the cyber attack action. Business services won the "most likely to get digitally mugged" award, with education and retail nipping at their heels. Hackers expanded their repertoire beyond boring old encryption to the much more exciting world of extortion. The US, UK and Canada took top honors in the "countries most likely to pay up" category. Bitcoins were the currency of choice for discerning hackers, because who doesn't love untraceable money?

Ransomware_Q4_2023. The report. [EN].pdf

Overkill Security

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

💥 You’re lucky! We’ve found two different (lead) developers that are willing to share their valuable lessons learned about using UiPath Document Understanding! Based on recent implementations in appealing use cases at Partou and SPIE. Don’t expect fancy videos or slide decks, but real and practical experiences that will help you with your own implementations. 📕 Topics that will be addressed: • Training the ML-model by humans: do or don't? • Rule-based versus AI extractors • Tips for finding use cases • How to start 👨‍🏫👨‍💻 Speakers: o Dion Morskieft, RPA Product Owner @Partou o Jack Klein-Schiphorst, Automation Developer @Tacstone Technology

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

UiPathCommunity

Abhishek Deb(1), Mr Abdul Kalam(2) M. Des (UX) , School of Design, DIT University , Dehradun. This paper explores the future potential of AI-enabled smartphone processors, aiming to investigate the advancements, capabilities, and implications of integrating artificial intelligence (AI) into smartphone technology. The research study goals consist of evaluating the development of AI in mobile phone processors, analyzing the existing state as well as abilities of AI-enabled cpus determining future patterns as well as chances together with reviewing obstacles as well as factors to consider for more growth.

Exploring the Future Potential of AI-Enabled Smartphone Processors

debabhi2

How to Troubleshoot Apps for the Modern Connected Worker

ThousandEyes

Join our latest Connector Corner webinar to discover how UiPath Integration Service revolutionizes API-centric automation in a 'Quote to Cash' process—and how that automation empowers businesses to accelerate revenue generation. A comprehensive demo will explore connecting systems, GenAI, and people, through powerful pre-built connectors designed to speed process cycle times. Speakers: James Dickson, Senior Software Engineer Charlie Greenberg, Host, Product Marketing Manager

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

DianaGray10

Kürzlich hochgeladen (20)

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Boost Fertility New Invention Ups Success Rates.pdf

Spring Boot vs Quarkus the ultimate battle - DevoxxUK

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Axa Assurance Maroc - Insurer Innovation Award 2024

Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...

FWD Group - Insurer Innovation Award 2024

Corporate and higher education May webinar.pptx

presentation ICT roal in 21st century education

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...

AWS Community Day CPH - Three problems of Terraform

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Ransomware_Q4_2023. The report. [EN].pdf

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam

Exploring the Future Potential of AI-Enabled Smartphone Processors

How to Troubleshoot Apps for the Modern Connected Worker

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Audio visualization English Version

1. HTML5 Audio Visualization @kmsheng

2. Who am I ? • Kuan Min Sheng a.k.a kmsheng • Worked for MOXA and PIXNET as a Software Engineer • Loves drawing, skateboarding and cooking

3. • Wanted to create unique web component ! • !Study HTML5 Web Audio API! • Enjoy the joy of coding Why would I want to implement my own audio player?

4. codepen.io & MDN rule

5. AudioContext.createScriptProcessor AnalyserNode.getByteFrequencyData ScriptProcesscorNode.onaudioprocess Notice! In safari all elements in a channel array are 0

6. Module Separation

7. <ks-stereo> <ks-icosahedron></ks-icosahedron> <ks-vinyl></ks-vinyl> <music-control></music-control> </ks-stereo> NOTE: icosahedron and vinyl take cares of drawing only

8. Vinyl Icosahedron Stereo Helper Math Util Animation music control Audio Enable Audio Context Canvas Util Three Renderer Detector Cache

9. Elementary Math

10. Checking if the mouse is inside a circle

11. Given coordinates of a circle’s center and central angle G, ﬁnd point (x3, y3) ( x3, y3 ) ( x1, y1 ) G

12. Given radius and chord, ﬁnd minor arc ?

13. context.arc(x, y, radius, 0, RADIAN * progress) RADIAN = Math.PI * 2

14. Animation Design

15. context.ﬁllStyle = ‘rgba(r, g, b, a)’ i^2

16. context.createRadialGradient

17. THREE.IcosahedronGeometry

18. The devil is in the details. Simulate press and release behaviors mouseup event optimization (mousedown in circle and allow mouseup triggers outside of circle)

19. Button Status Design

20. fallback Modernizr.audio Modernizr.webaudio && (! Modernizr.touch)

21. • browser memory leak! • cross browser support & fallback! • custom cursor loading issue! • html canvas animation stutter! • responsive handling! • webgl context gc bug Issues you may experience when creating an audio visualization

22. https://github.com/ kmsheng/angular-ks- stereo Pull Requests & Issues Welcome !

23. What about test ?

24. TONIGHT WE TEST IN PRODUCTION

25. kmsheng.com

26. Feel free to contact me via my website 純

27. Q & A

28. https://developer.mozilla.org/en-US/docs/Web/API/ ScriptProcessorNode https://developer.mozilla.org/en-US/docs/Web/API/ AudioContext.createScriptProcessor http://codepen.io/soulwire/pen/Dscga https://developer.mozilla.org/en-US/docs/Web/Guide/ Events/Media_events http://kenjiendo.com Reference