SlideShare a Scribd company logo
Web Audio API + AngularJS
•
•
•
Visualized: webaudioplayground.appspot.com
Web Audio API + AngularJS
•
•
var request = new XMLHttpRequest();
request.open('GET', myURL, true);
request.responseType = 'arraybuffer‘;
request.onload = requestLoad;
request.send();
function requestLoad() {
// yay, finally done loading
_audioContext.decodeAudioData(request.response, doneDecoding);
}
function doneDecoding(buffer) {
// yay, finally done decoding
playBuffer(buffer);
}
function playBuffer(buffer) {
var bufferSourceNode = _audioContext.createBufferSource();
bufferSourceNode.buffer = buffer;
buffer.connect(_audioContext.destination); // connect to output
buffer.start(0); //play
}
// create an HTML Audio Element, or use an existing one
var audio = new Audio(myURL);
// Audio Element will let us know when it's buffered enough
audio.addEventListener('canplaythrough', function(e) {
var mediaSourceNode = _audioContext.createMediaElementSource(audio);
mediaSourceNode.connect(_audioContext.destination); // connect to output
audio.play(); // play
});
•
•
–
•
–
–
<body ng-app="Page" ng-controller="PageController">
<div class="songs">
<span ng-repeat="song in songs">
<input type="radio" ng-model="$parent.currentSong" ng-value="song" />
<label>{{song.name+' ('+song.band+')'}}</label>
</span>
</div>
<div class="controls" ng-show="currentSong“>
<h2>{{currentSong.name}}</h2>
<button ng-show="!playing" ng-click="playTracks()">Play</button>
<button ng-show="playing" ng-click="stopTracks()">Stop</button>
</div>
<div class="track-container">
<div ng-controller="TrackController" class="track" ng-class="{loading:loading==true}"
ng-repeat="(key, track) in currentSong.tracks">
<input type="range" ng-model="trackVolume" />
<canvas></canvas>
<span class="spinner" ng-show="loading"></span>
</div>
</div>
</body>
<body ng-app="Page" ng-controller="PageController">
<div class="songs">
<span ng-repeat="song in songs">
<input type="radio" ng-model="$parent.currentSong" ng-value="song" />
<label>{{song.name+' ('+song.band+')'}}</label>
</span>
</div>
<div class="controls" ng-show="currentSong“>
<h2>{{currentSong.name}}</h2>
<button ng-show="!playing" ng-click="playTracks()">Play</button>
<button ng-show="playing" ng-click="stopTracks()">Stop</button>
</div>
<div class="track-container">
<div ng-controller="TrackController" class="track" ng-class="{loading:loading==true}"
ng-repeat="(key, track) in currentSong.tracks">
<input type="range" ng-model="trackVolume" />
<canvas></canvas>
<span class="spinner" ng-show="loading"></span>
</div>
</div>
</body>
_page.controller('PageController', function($scope) {
...
$scope.playTracks = function(tracks) {
angular.forEach(tracks, function(track, key) {
track.play();
});
$scope.playing = true;
};
function tick() {
angular.forEach($scope.currentSong.tracks, function(track, key) {
if (track.analyser) {
_drawStuff(track.cCtx, track.analyser);
}
});
window.requestAnimationFrame(tick);
}
...
});
_page.controller('TrackController', function($scope, $element) {
$scope.trackVolume = 100;
$scope.canvas = $element[0].getElementsByTagName('canvas')[0];
$scope.track.play = function() {
$scope.track.audio.play();
};
$scope.track.stop = function() {
$scope.track.audio.pause();
};
$scope.$watch('trackVolume', function(value) {
value = value / 100;
if ($scope.track.gainNode) {
$scope.track.gainNode.gain.value = value;
}
});
});
var analyser = _aCtx.createAnalyser();
analyser.smoothingTimeConstant = 0.6;
analyser.fftSize = 256;
// Each frame:
var byteFreqArr = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(byteFreqArr);
var timeDomainArr = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(timeDomainArr);
canvasContext.clearRect(0, 0, _cWidth, _cHeight);
canvasContext.beginPath();
for (var i=0,iLen=byteFreqArr.length; i<iLen; i++) {
canvasContext.fillRect(i*_freqDrawWidth, _cHeight - (byteFreqArr[i] / 256 *
_cHeight), (_freqDrawWidth - 2), _cHeight);
var percent = timeDomainArr[i] / 256;
var offset = _cHeight - (percent * _cHeight) - 1;
canvasContext.lineTo(i*_timeDrawWidth, offset);
}
canvasContext.stroke();
Web Audio API + AngularJS
Ad

More Related Content

What's hot (20)

并发模型介绍
并发模型介绍并发模型介绍
并发模型介绍
qiang
 
"PostgreSQL and Python" Lightning Talk @EuroPython2014
"PostgreSQL and Python" Lightning Talk @EuroPython2014"PostgreSQL and Python" Lightning Talk @EuroPython2014
"PostgreSQL and Python" Lightning Talk @EuroPython2014
Henning Jacobs
 
Python postgre sql a wonderful wedding
Python postgre sql   a wonderful weddingPython postgre sql   a wonderful wedding
Python postgre sql a wonderful wedding
Stéphane Wirtel
 
KubeCon EU 2016: Custom Volume Plugins
KubeCon EU 2016: Custom Volume PluginsKubeCon EU 2016: Custom Volume Plugins
KubeCon EU 2016: Custom Volume Plugins
KubeAcademy
 
DevOps with Fabric
DevOps with FabricDevOps with Fabric
DevOps with Fabric
Simone Federici
 
dotCloud and go
dotCloud and godotCloud and go
dotCloud and go
Flavio Poletti
 
BASH Variables Part 1: Basic Interpolation
BASH Variables Part 1: Basic InterpolationBASH Variables Part 1: Basic Interpolation
BASH Variables Part 1: Basic Interpolation
Workhorse Computing
 
Troubleshooting Puppet
Troubleshooting PuppetTroubleshooting Puppet
Troubleshooting Puppet
Thomas Howard Uphill
 
Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...
Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...
Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...
Puppet
 
What's new in PHP 5.5
What's new in PHP 5.5What's new in PHP 5.5
What's new in PHP 5.5
Tom Corrigan
 
Introduction To Power Shell
Introduction To Power ShellIntroduction To Power Shell
Introduction To Power Shell
Ivan Suhinin
 
Programming with Python and PostgreSQL
Programming with Python and PostgreSQLProgramming with Python and PostgreSQL
Programming with Python and PostgreSQL
Peter Eisentraut
 
PowerShell 101
PowerShell 101PowerShell 101
PowerShell 101
Thomas Lee
 
ReactPHP
ReactPHPReactPHP
ReactPHP
Philip Norton
 
Webrtc mojo
Webrtc mojoWebrtc mojo
Webrtc mojo
bpmedley
 
Trading with opensource tools, two years later
Trading with opensource tools, two years laterTrading with opensource tools, two years later
Trading with opensource tools, two years later
clkao
 
Introducing PHP Latest Updates
Introducing PHP Latest UpdatesIntroducing PHP Latest Updates
Introducing PHP Latest Updates
Iftekhar Eather
 
Using Ansible Dynamic Inventory with Amazon EC2
Using Ansible Dynamic Inventory with Amazon EC2Using Ansible Dynamic Inventory with Amazon EC2
Using Ansible Dynamic Inventory with Amazon EC2
Brian Schott
 
Ruby to Elixir - what's great and what you might miss
Ruby to Elixir - what's great and what you might missRuby to Elixir - what's great and what you might miss
Ruby to Elixir - what's great and what you might miss
Tobias Pfeiffer
 
Migrating to Puppet 4.0
Migrating to Puppet 4.0Migrating to Puppet 4.0
Migrating to Puppet 4.0
Puppet
 
并发模型介绍
并发模型介绍并发模型介绍
并发模型介绍
qiang
 
"PostgreSQL and Python" Lightning Talk @EuroPython2014
"PostgreSQL and Python" Lightning Talk @EuroPython2014"PostgreSQL and Python" Lightning Talk @EuroPython2014
"PostgreSQL and Python" Lightning Talk @EuroPython2014
Henning Jacobs
 
Python postgre sql a wonderful wedding
Python postgre sql   a wonderful weddingPython postgre sql   a wonderful wedding
Python postgre sql a wonderful wedding
Stéphane Wirtel
 
KubeCon EU 2016: Custom Volume Plugins
KubeCon EU 2016: Custom Volume PluginsKubeCon EU 2016: Custom Volume Plugins
KubeCon EU 2016: Custom Volume Plugins
KubeAcademy
 
BASH Variables Part 1: Basic Interpolation
BASH Variables Part 1: Basic InterpolationBASH Variables Part 1: Basic Interpolation
BASH Variables Part 1: Basic Interpolation
Workhorse Computing
 
Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...
Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...
Puppet Camp Phoenix 2015: Managing Files via Puppet: Let Me Count The Ways (B...
Puppet
 
What's new in PHP 5.5
What's new in PHP 5.5What's new in PHP 5.5
What's new in PHP 5.5
Tom Corrigan
 
Introduction To Power Shell
Introduction To Power ShellIntroduction To Power Shell
Introduction To Power Shell
Ivan Suhinin
 
Programming with Python and PostgreSQL
Programming with Python and PostgreSQLProgramming with Python and PostgreSQL
Programming with Python and PostgreSQL
Peter Eisentraut
 
PowerShell 101
PowerShell 101PowerShell 101
PowerShell 101
Thomas Lee
 
Webrtc mojo
Webrtc mojoWebrtc mojo
Webrtc mojo
bpmedley
 
Trading with opensource tools, two years later
Trading with opensource tools, two years laterTrading with opensource tools, two years later
Trading with opensource tools, two years later
clkao
 
Introducing PHP Latest Updates
Introducing PHP Latest UpdatesIntroducing PHP Latest Updates
Introducing PHP Latest Updates
Iftekhar Eather
 
Using Ansible Dynamic Inventory with Amazon EC2
Using Ansible Dynamic Inventory with Amazon EC2Using Ansible Dynamic Inventory with Amazon EC2
Using Ansible Dynamic Inventory with Amazon EC2
Brian Schott
 
Ruby to Elixir - what's great and what you might miss
Ruby to Elixir - what's great and what you might missRuby to Elixir - what's great and what you might miss
Ruby to Elixir - what's great and what you might miss
Tobias Pfeiffer
 
Migrating to Puppet 4.0
Migrating to Puppet 4.0Migrating to Puppet 4.0
Migrating to Puppet 4.0
Puppet
 

Similar to Web Audio API + AngularJS (20)

JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Robert Nyman
 
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the PlatformJavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
Robert Nyman
 
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
Robert Nyman
 
NodeJS
NodeJSNodeJS
NodeJS
.toster
 
--import statemnts for Random- Scanner and IO import java-util-Random-.pdf
--import statemnts for Random- Scanner and IO import java-util-Random-.pdf--import statemnts for Random- Scanner and IO import java-util-Random-.pdf
--import statemnts for Random- Scanner and IO import java-util-Random-.pdf
ganisyedtrd
 
Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}
.toster
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
Robert Nyman
 
HTML5 APIs - Where No Man Has Gone Before! - Paris Web
HTML5 APIs -  Where No Man Has Gone Before! - Paris WebHTML5 APIs -  Where No Man Has Gone Before! - Paris Web
HTML5 APIs - Where No Man Has Gone Before! - Paris Web
Robert Nyman
 
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.ioNode worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Caesar Chi
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
Tom Croucher
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
TrevorBurnham
 
NodeJs
NodeJsNodeJs
NodeJs
dizabl
 
Android Studio Assignment HelpCan someone who is familiar with And.pdf
Android Studio Assignment HelpCan someone who is familiar with And.pdfAndroid Studio Assignment HelpCan someone who is familiar with And.pdf
Android Studio Assignment HelpCan someone who is familiar with And.pdf
feelinggift
 
5. Ввод-вывод, доступ к файловой системе
5. Ввод-вывод, доступ к файловой системе5. Ввод-вывод, доступ к файловой системе
5. Ввод-вывод, доступ к файловой системе
DEVTYPE
 
Background Audio Playback
Background Audio PlaybackBackground Audio Playback
Background Audio Playback
Korhan Bircan
 
Apache Beam de A à Z
 Apache Beam de A à Z Apache Beam de A à Z
Apache Beam de A à Z
Paris Data Engineers !
 
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...
emmaberlin1
 
CouchDB on Android
CouchDB on AndroidCouchDB on Android
CouchDB on Android
Sven Haiges
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it means
Robert Nyman
 
file-transfer-using-tcp.pdf
file-transfer-using-tcp.pdffile-transfer-using-tcp.pdf
file-transfer-using-tcp.pdf
Jayaprasanna4
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Robert Nyman
 
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the PlatformJavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
Robert Nyman
 
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
Robert Nyman
 
--import statemnts for Random- Scanner and IO import java-util-Random-.pdf
--import statemnts for Random- Scanner and IO import java-util-Random-.pdf--import statemnts for Random- Scanner and IO import java-util-Random-.pdf
--import statemnts for Random- Scanner and IO import java-util-Random-.pdf
ganisyedtrd
 
Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}Matthew Eernisse, NodeJs, .toster {webdev}
Matthew Eernisse, NodeJs, .toster {webdev}
.toster
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
Robert Nyman
 
HTML5 APIs - Where No Man Has Gone Before! - Paris Web
HTML5 APIs -  Where No Man Has Gone Before! - Paris WebHTML5 APIs -  Where No Man Has Gone Before! - Paris Web
HTML5 APIs - Where No Man Has Gone Before! - Paris Web
Robert Nyman
 
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.ioNode worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Caesar Chi
 
A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...A language for the Internet: Why JavaScript and Node.js is right for Internet...
A language for the Internet: Why JavaScript and Node.js is right for Internet...
Tom Croucher
 
NodeJs
NodeJsNodeJs
NodeJs
dizabl
 
Android Studio Assignment HelpCan someone who is familiar with And.pdf
Android Studio Assignment HelpCan someone who is familiar with And.pdfAndroid Studio Assignment HelpCan someone who is familiar with And.pdf
Android Studio Assignment HelpCan someone who is familiar with And.pdf
feelinggift
 
5. Ввод-вывод, доступ к файловой системе
5. Ввод-вывод, доступ к файловой системе5. Ввод-вывод, доступ к файловой системе
5. Ввод-вывод, доступ к файловой системе
DEVTYPE
 
Background Audio Playback
Background Audio PlaybackBackground Audio Playback
Background Audio Playback
Korhan Bircan
 
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...
Dev Day 2024: Jonathan Frere - Playwright: Das Beste aus dem Dramatiker herau...
emmaberlin1
 
CouchDB on Android
CouchDB on AndroidCouchDB on Android
CouchDB on Android
Sven Haiges
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it means
Robert Nyman
 
file-transfer-using-tcp.pdf
file-transfer-using-tcp.pdffile-transfer-using-tcp.pdf
file-transfer-using-tcp.pdf
Jayaprasanna4
 
Ad

Recently uploaded (20)

Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
Everything You Need to Know About Agentforce? (Put AI Agents to Work)
Everything You Need to Know About Agentforce? (Put AI Agents to Work)Everything You Need to Know About Agentforce? (Put AI Agents to Work)
Everything You Need to Know About Agentforce? (Put AI Agents to Work)
Cyntexa
 
Smart Investments Leveraging Agentic AI for Real Estate Success.pptx
Smart Investments Leveraging Agentic AI for Real Estate Success.pptxSmart Investments Leveraging Agentic AI for Real Estate Success.pptx
Smart Investments Leveraging Agentic AI for Real Estate Success.pptx
Seasia Infotech
 
Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?
Eric Torreborre
 
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
Com fer un pla de gestió de dades amb l'eiNa DMP (en anglès)
CSUC - Consorci de Serveis Universitaris de Catalunya
 
Config 2025 presentation recap covering both days
Config 2025 presentation recap covering both daysConfig 2025 presentation recap covering both days
Config 2025 presentation recap covering both days
TrishAntoni1
 
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdfKit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Wonjun Hwang
 
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
James Anderson
 
May Patch Tuesday
May Patch TuesdayMay Patch Tuesday
May Patch Tuesday
Ivanti
 
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
João Esperancinha
 
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
Ivano Malavolta
 
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz
 
Unlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web AppsUnlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web Apps
Maximiliano Firtman
 
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Safe Software
 
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptxDevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
Justin Reock
 
AI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of DocumentsAI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of Documents
UiPathCommunity
 
AsyncAPI v3 : Streamlining Event-Driven API Design
AsyncAPI v3 : Streamlining Event-Driven API DesignAsyncAPI v3 : Streamlining Event-Driven API Design
AsyncAPI v3 : Streamlining Event-Driven API Design
leonid54
 
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPathCommunity
 
Agentic Automation - Delhi UiPath Community Meetup
Agentic Automation - Delhi UiPath Community MeetupAgentic Automation - Delhi UiPath Community Meetup
Agentic Automation - Delhi UiPath Community Meetup
Manoj Batra (1600 + Connections)
 
AI x Accessibility UXPA by Stew Smith and Olivier Vroom
AI x Accessibility UXPA by Stew Smith and Olivier VroomAI x Accessibility UXPA by Stew Smith and Olivier Vroom
AI x Accessibility UXPA by Stew Smith and Olivier Vroom
UXPA Boston
 
Bepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firmBepents tech services - a premier cybersecurity consulting firm
Bepents tech services - a premier cybersecurity consulting firm
Benard76
 
Everything You Need to Know About Agentforce? (Put AI Agents to Work)
Everything You Need to Know About Agentforce? (Put AI Agents to Work)Everything You Need to Know About Agentforce? (Put AI Agents to Work)
Everything You Need to Know About Agentforce? (Put AI Agents to Work)
Cyntexa
 
Smart Investments Leveraging Agentic AI for Real Estate Success.pptx
Smart Investments Leveraging Agentic AI for Real Estate Success.pptxSmart Investments Leveraging Agentic AI for Real Estate Success.pptx
Smart Investments Leveraging Agentic AI for Real Estate Success.pptx
Seasia Infotech
 
Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?Shoehorning dependency injection into a FP language, what does it take?
Shoehorning dependency injection into a FP language, what does it take?
Eric Torreborre
 
Config 2025 presentation recap covering both days
Config 2025 presentation recap covering both daysConfig 2025 presentation recap covering both days
Config 2025 presentation recap covering both days
TrishAntoni1
 
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdfKit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Kit-Works Team Study_팀스터디_김한솔_nuqs_20250509.pdf
Wonjun Hwang
 
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
GDG Cloud Southlake #42: Suresh Mathew: Autonomous Resource Optimization: How...
James Anderson
 
May Patch Tuesday
May Patch TuesdayMay Patch Tuesday
May Patch Tuesday
Ivanti
 
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
Could Virtual Threads cast away the usage of Kotlin Coroutines - DevoxxUK2025
João Esperancinha
 
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
On-Device or Remote? On the Energy Efficiency of Fetching LLM-Generated Conte...
Ivano Malavolta
 
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025Zilliz Cloud Monthly Technical Review: May 2025
Zilliz Cloud Monthly Technical Review: May 2025
Zilliz
 
Unlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web AppsUnlocking Generative AI in your Web Apps
Unlocking Generative AI in your Web Apps
Maximiliano Firtman
 
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Integrating FME with Python: Tips, Demos, and Best Practices for Powerful Aut...
Safe Software
 
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptxDevOpsDays SLC - Platform Engineers are Product Managers.pptx
DevOpsDays SLC - Platform Engineers are Product Managers.pptx
Justin Reock
 
AI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of DocumentsAI Agents at Work: UiPath, Maestro & the Future of Documents
AI Agents at Work: UiPath, Maestro & the Future of Documents
UiPathCommunity
 
AsyncAPI v3 : Streamlining Event-Driven API Design
AsyncAPI v3 : Streamlining Event-Driven API DesignAsyncAPI v3 : Streamlining Event-Driven API Design
AsyncAPI v3 : Streamlining Event-Driven API Design
leonid54
 
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à GenèveUiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPath Automation Suite – Cas d'usage d'une NGO internationale basée à Genève
UiPathCommunity
 
AI x Accessibility UXPA by Stew Smith and Olivier Vroom
AI x Accessibility UXPA by Stew Smith and Olivier VroomAI x Accessibility UXPA by Stew Smith and Olivier Vroom
AI x Accessibility UXPA by Stew Smith and Olivier Vroom
UXPA Boston
 
Ad

Web Audio API + AngularJS

  • 5. var request = new XMLHttpRequest(); request.open('GET', myURL, true); request.responseType = 'arraybuffer‘; request.onload = requestLoad; request.send(); function requestLoad() { // yay, finally done loading _audioContext.decodeAudioData(request.response, doneDecoding); } function doneDecoding(buffer) { // yay, finally done decoding playBuffer(buffer); } function playBuffer(buffer) { var bufferSourceNode = _audioContext.createBufferSource(); bufferSourceNode.buffer = buffer; buffer.connect(_audioContext.destination); // connect to output buffer.start(0); //play }
  • 6. // create an HTML Audio Element, or use an existing one var audio = new Audio(myURL); // Audio Element will let us know when it's buffered enough audio.addEventListener('canplaythrough', function(e) { var mediaSourceNode = _audioContext.createMediaElementSource(audio); mediaSourceNode.connect(_audioContext.destination); // connect to output audio.play(); // play });
  • 8. <body ng-app="Page" ng-controller="PageController"> <div class="songs"> <span ng-repeat="song in songs"> <input type="radio" ng-model="$parent.currentSong" ng-value="song" /> <label>{{song.name+' ('+song.band+')'}}</label> </span> </div> <div class="controls" ng-show="currentSong“> <h2>{{currentSong.name}}</h2> <button ng-show="!playing" ng-click="playTracks()">Play</button> <button ng-show="playing" ng-click="stopTracks()">Stop</button> </div> <div class="track-container"> <div ng-controller="TrackController" class="track" ng-class="{loading:loading==true}" ng-repeat="(key, track) in currentSong.tracks"> <input type="range" ng-model="trackVolume" /> <canvas></canvas> <span class="spinner" ng-show="loading"></span> </div> </div> </body>
  • 9. <body ng-app="Page" ng-controller="PageController"> <div class="songs"> <span ng-repeat="song in songs"> <input type="radio" ng-model="$parent.currentSong" ng-value="song" /> <label>{{song.name+' ('+song.band+')'}}</label> </span> </div> <div class="controls" ng-show="currentSong“> <h2>{{currentSong.name}}</h2> <button ng-show="!playing" ng-click="playTracks()">Play</button> <button ng-show="playing" ng-click="stopTracks()">Stop</button> </div> <div class="track-container"> <div ng-controller="TrackController" class="track" ng-class="{loading:loading==true}" ng-repeat="(key, track) in currentSong.tracks"> <input type="range" ng-model="trackVolume" /> <canvas></canvas> <span class="spinner" ng-show="loading"></span> </div> </div> </body>
  • 10. _page.controller('PageController', function($scope) { ... $scope.playTracks = function(tracks) { angular.forEach(tracks, function(track, key) { track.play(); }); $scope.playing = true; }; function tick() { angular.forEach($scope.currentSong.tracks, function(track, key) { if (track.analyser) { _drawStuff(track.cCtx, track.analyser); } }); window.requestAnimationFrame(tick); } ... });
  • 11. _page.controller('TrackController', function($scope, $element) { $scope.trackVolume = 100; $scope.canvas = $element[0].getElementsByTagName('canvas')[0]; $scope.track.play = function() { $scope.track.audio.play(); }; $scope.track.stop = function() { $scope.track.audio.pause(); }; $scope.$watch('trackVolume', function(value) { value = value / 100; if ($scope.track.gainNode) { $scope.track.gainNode.gain.value = value; } }); });
  • 12. var analyser = _aCtx.createAnalyser(); analyser.smoothingTimeConstant = 0.6; analyser.fftSize = 256; // Each frame: var byteFreqArr = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(byteFreqArr); var timeDomainArr = new Uint8Array(analyser.frequencyBinCount); analyser.getByteTimeDomainData(timeDomainArr); canvasContext.clearRect(0, 0, _cWidth, _cHeight); canvasContext.beginPath(); for (var i=0,iLen=byteFreqArr.length; i<iLen; i++) { canvasContext.fillRect(i*_freqDrawWidth, _cHeight - (byteFreqArr[i] / 256 * _cHeight), (_freqDrawWidth - 2), _cHeight); var percent = timeDomainArr[i] / 256; var offset = _cHeight - (percent * _cHeight) - 1; canvasContext.lineTo(i*_timeDrawWidth, offset); } canvasContext.stroke();
  翻译: