SlideShare ist ein Scribd-Unternehmen logo
1 von 49
Downloaden Sie, um offline zu lesen
Web Developer or OS
Developer?
Experience from FirefoxOS
Alive
COSCUP 2013
me
@alivedise	

	

http://alivedise.github.io	

http://github.com/alivedise	

	

alive@mozilla.com	

alegnadise@gmail.com	

	

~2.5year Frontend Exp.	

	

	

	

聽說COSCUP一定要放
Operating System
?
http://www.flickr.com/photos/klaikong/6041270516/
Operating System
FirefoxOS….OS?
Storage
Management	

fileSystem(yet)	

DeviceStorageWatcher	

Memory
Management	

PageVisibility	

mozAppType	

User
Interface	

Multi Window
Management	

Statusbar	

System Overlay	

App Overlay	

Web Activity	

Keyboard	

Hardware
Resource
Management	

Wi-Fi	

Radio	

GPS	

Bluetooth	

Power	

CPU WakeLock	

Audio/Media	

Multi-Tasking	

mozBrowser
remote=true	

Card view
• Multi Channel	

• Audio Competing	

• Background Play	

Audio Management
The beginning of everything..
http://bugzil.la/805333
805333
Why do we need multi-
channel on OS?
Sounds within FxOS - <audio/>
Sounds within FxOS - radio
Sounds within FxOS - alarm
Sounds within FxOS - voice
The world of single channel..
Peace
But..
Too peaceful.
This means:
When you mute the device, your
alarm also is muted. So..
Overslept ♪♪♪~
Zzzzz..
How does OS avoid that?
Different settings for audios on
different purposes.
On the other hand..
Competing
On Desktop browser, we don’t need
competing.
How about mobile OS?
Cases
• one <audio/> in one app.	

• two <audio/> in one app.	

• two <audio/> in two apps.	

• one <audio/> and one not-audio-sound in two
apps.
It’s all about UX.
User wants to listen music in background..	

User has difficulty to mute the background app..	

User needs the alarm to sound anyway..
Android solution: audio focus
• http://developer.android.com/training/managing
-audio/audio-focus.html	

• App is responsible to request the audio focus on
demand and release the focus actively.
Problems
• How to request audio focus in web?	

• Volume control of different type of audio source.	

• Telephony is not using audio tag.	

• FM is not using audio tag.	

• …
Proposal
• New attribute for media tags.	

• Background play and competing needs permission
check.	

• Expose current occupied media info to system.
Page Visibility
• HTML5 Page Visibility	

• The page visibility state is simple on desktop
browsers by toggling tabs.	

• A little complicated on FirefoxOS	

• Window(App) has opening/closing transitions.	

• Screen off means page visibility is hidden, too.	

• Background page has higher possibility to be
killed. (Memory Management!)
mozAudioChannelType
telephony	

alarm	

notification	

content	

normal(default)
Multi channel volume settings
• ringer, desktop-notification	

audio.volume.notification	

• music, FMRadio	

audio.volume.content	

• alarm	

audio.volume.alarm	

• telephony	

audio.volume.voice	

• Bluetooth SCO	

audio.volume.bt_sco
Usage
OR
manifest.webapp
app.html
app.js
Interrupted Event
Current Competing Policies
•  Channel with higher priority interrupts the
lower channel.	

•  Foreground page is always playable. But
interruption occurs or not depends on
the channel of the media element.	

•  When screen is off, the current app or
page is not brought to background now if
it’s playing normal channel audio now.
(Memory and Power concern!)	

•  Audio elements being interrupted could
know by ‘mozinterruptbegin’ and
‘mozinterruptend’.	

content
normal
Gecko side
mozAudioChannelType
audio
App
nsIDOMHTMLAudioElement
nsIDOMHTMLMediaElement
nsHTMLMediaElement
nsIAudioChannelAgentCallback
nsIAudioChannelAgent
nsBuiltinDecoder
nsMediaOmxDecoder
nsMediaDecoder
DataSource
MediaStreamSource
MediaResource
- SetReadMode()
create
IOMX
OMX
MediaExtractorOMXCodec
MediaSource - Tell()
- Seek()
- Read()
- GetLength()
hw codec
sw codec
MediaBuffer
- CanPlayChanged()
- mozinterruptbegin event
- mozinterruptend event
OmxDecoder
nsHTMLAudioElement
nsIChannel
create
nsMediaOmxReader
nsBuiltinDecoderReader
create
create
MediaOmxStateMachine
nsBuiltinDecoderStateMachine
nsDecoderStateMachine
create
nsIThread
nsIThread
control
create
nsDocument
- NotifyOwnerDocumentActivityChanged()
FileMediaResource
ChannelMediaResource
nsAudioStream
nsNativeAudioStream
libsydneyaudio
AudioTrack
AudioFlinger
- Write()
- Pause()
- Resume()
- IsPaused()
- Drain()
- GetMinWriteSize()
- GetPosition()
- SetVolume()
platform: Firefox OS(gonk)
branch: Firefox OS 1.01 (b2g18)
will be replaced to libcubeb in v1.2
Audio Streams
Diagram
https://github.com/sotaroikeda/firefox-diagrams
Since API is implemented..
World peace?
No…
Don’t forget the dependency tree.
Incoming Issues
• Silent mode under multi channels	

• Background play ability of existing web pages	

• Background play and competing for video	

• Short playing sound is hard to adjust.	

• DTMF tones	

• Power consumptions.	

• Bluetooth earphone has its own profile.	

• …
Policy for Silent mode
• Easy for single channel	

• Multi channels	

• The default channel for volume rockers is
‘notification’. (Same as Android)	

• Silent mode interesting channels	

• notification	

• content/normal	

• Alarm is not affected by silent mode.
Policy for video element
• video doesn’t need to play at background.	

• Currently, use ‘visibilitychange’ event.	

• video by default shall be able to compete the
background playing content channel.	

• Separate background play and audio competing
for video element.
Background play issues
• Existing web pages: “Hey, I’m a music site!”	

• grooveshark	

• youtube	

• …	

• How to play when screen is off without adding
mozAudioChannelType to each web site?	

• Depart screen off state from invisible page
visibility state.
CE Certification
•  EN 50332-1	

•  Output level through earphone
should be under 85 dBA.	

•  Prompt a warning when earphone is
plugged and the volume is greater
than 85 dBA.	

•  The cool down time of CE warning
popup is continuous 20 hours music
listening.
OS level policy for CE
• Only apply to content/normal channel.	

• Output power is hardware-dependent. Exactly,
we don’t know the db value for specific devices.	

• The CE maximum value is customizable for
different OEM via default settings.
After all..
UX logic in backend and frontend
backend
frontend
Find out solutions for existing web sites without
new API.
• As a platform, it’s difficult to make decisions.	

• New API takes time to be mature.
The scope is undefined before you look
into it.
To be honest, I wrote few
code in these issues.
But lots of online/offline discussions.
The position of Frontend
https://speakerdeck.com/josephj/f2e-the-keystone
• It doesn’t matter you are making a web site, a
web app or an operating system.	

• Frontend is the one connecting UX and Backend,
and struggle for ideal design and real
requirement.
Thanks!
Not the end, to be continued..

Weitere ähnliche Inhalte

Was ist angesagt?

Console design template
Console design template Console design template
Console design template
copelandadam
 
Lua and adaptive audio - Don Veca (Activision)
Lua and adaptive audio - Don Veca (Activision)Lua and adaptive audio - Don Veca (Activision)
Lua and adaptive audio - Don Veca (Activision)
Kore VM
 
Latest Gadgets 2009
Latest Gadgets 2009Latest Gadgets 2009
Latest Gadgets 2009
myd
 
Media hardware
Media hardwareMedia hardware
Media hardware
coralprout
 
How to rip blu rays to ipad
How to rip blu rays  to ipadHow to rip blu rays  to ipad
How to rip blu rays to ipad
amy0327
 
Btv solo music production software download free
Btv solo music production software download freeBtv solo music production software download free
Btv solo music production software download free
mizrahirep
 

Was ist angesagt? (18)

Console design template
Console design template Console design template
Console design template
 
Lua and adaptive audio - Don Veca (Activision)
Lua and adaptive audio - Don Veca (Activision)Lua and adaptive audio - Don Veca (Activision)
Lua and adaptive audio - Don Veca (Activision)
 
Get On The Audiobus (CocoaConf Boston, October 2013)
Get On The Audiobus (CocoaConf Boston, October 2013)Get On The Audiobus (CocoaConf Boston, October 2013)
Get On The Audiobus (CocoaConf Boston, October 2013)
 
Latest Gadgets 2009
Latest Gadgets 2009Latest Gadgets 2009
Latest Gadgets 2009
 
Media hardware
Media hardwareMedia hardware
Media hardware
 
Must see lesson
Must see lesson Must see lesson
Must see lesson
 
Logic Audio Ideas: Must See Lesson
Logic Audio Ideas: Must See LessonLogic Audio Ideas: Must See Lesson
Logic Audio Ideas: Must See Lesson
 
Podcasting in VET
Podcasting in VETPodcasting in VET
Podcasting in VET
 
Tune wiki presentation
Tune wiki presentationTune wiki presentation
Tune wiki presentation
 
How to rip blu rays to ipad
How to rip blu rays  to ipadHow to rip blu rays  to ipad
How to rip blu rays to ipad
 
Tips for live streaming a musical performance
Tips for live streaming a musical performanceTips for live streaming a musical performance
Tips for live streaming a musical performance
 
Btv solo music production software download free
Btv solo music production software download freeBtv solo music production software download free
Btv solo music production software download free
 
Joomla Essential Extensions
Joomla Essential ExtensionsJoomla Essential Extensions
Joomla Essential Extensions
 
Tablet pc
Tablet pcTablet pc
Tablet pc
 
In dash dvd gps navigation system
In dash dvd gps navigation systemIn dash dvd gps navigation system
In dash dvd gps navigation system
 
Presentation2
Presentation2Presentation2
Presentation2
 
Erahidaeon
ErahidaeonErahidaeon
Erahidaeon
 
Dooggdia
DooggdiaDooggdia
Dooggdia
 

Andere mochten auch

#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
daf182
 

Andere mochten auch (7)

[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
FXOS Window management 101
FXOS Window management 101FXOS Window management 101
FXOS Window management 101
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
 
FirefoxOS Window Management
FirefoxOS Window ManagementFirefoxOS Window Management
FirefoxOS Window Management
 
Firefox OS Window management 201
Firefox OS Window management 201Firefox OS Window management 201
Firefox OS Window management 201
 
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving CarsStudy: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
 

Ähnlich wie [COSCUP 2013] Audio Competing

Voodoo video conference preparation - presenters
Voodoo video conference preparation - presentersVoodoo video conference preparation - presenters
Voodoo video conference preparation - presenters
Khouzhan Athena
 
ALA Alex
ALA AlexALA Alex
ALA Alex
abelden
 

Ähnlich wie [COSCUP 2013] Audio Competing (20)

Intro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for LearningIntro to Compression: Audio and Video Optimization for Learning
Intro to Compression: Audio and Video Optimization for Learning
 
Deep dive into Android’s audio latency problem
Deep dive into Android’s audio latency problemDeep dive into Android’s audio latency problem
Deep dive into Android’s audio latency problem
 
Echo in WebRTC; Why?
Echo in WebRTC; Why?Echo in WebRTC; Why?
Echo in WebRTC; Why?
 
Call audio
Call audioCall audio
Call audio
 
Effective HTML5 game audio
Effective HTML5 game audioEffective HTML5 game audio
Effective HTML5 game audio
 
WebRTC, RED and Janus @ ClueCon21
WebRTC, RED and Janus @ ClueCon21WebRTC, RED and Janus @ ClueCon21
WebRTC, RED and Janus @ ClueCon21
 
Responsive vs Adaptive Web Design - What about Device Channels?
Responsive vs Adaptive Web Design - What about Device Channels?Responsive vs Adaptive Web Design - What about Device Channels?
Responsive vs Adaptive Web Design - What about Device Channels?
 
2012 djb software_features & topology
2012 djb software_features & topology2012 djb software_features & topology
2012 djb software_features & topology
 
Personnalisation d'Android par Archos 26-10-2011 au PAUG
Personnalisation d'Android par Archos 26-10-2011 au PAUGPersonnalisation d'Android par Archos 26-10-2011 au PAUG
Personnalisation d'Android par Archos 26-10-2011 au PAUG
 
Developing FirefoxOS
Developing FirefoxOSDeveloping FirefoxOS
Developing FirefoxOS
 
Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...
Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...
Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...
 
Glitch-Free A/V Encoding (CocoaConf Boston, October 2013)
Glitch-Free A/V Encoding (CocoaConf Boston, October 2013)Glitch-Free A/V Encoding (CocoaConf Boston, October 2013)
Glitch-Free A/V Encoding (CocoaConf Boston, October 2013)
 
Janus + Audio @ Open Source World
Janus + Audio @ Open Source WorldJanus + Audio @ Open Source World
Janus + Audio @ Open Source World
 
Ministry and Media Technologies - Pro Tips
Ministry and Media Technologies - Pro TipsMinistry and Media Technologies - Pro Tips
Ministry and Media Technologies - Pro Tips
 
Mobile Smart Streaming
Mobile Smart StreamingMobile Smart Streaming
Mobile Smart Streaming
 
Voodoo video conference preparation - presenters
Voodoo video conference preparation - presentersVoodoo video conference preparation - presenters
Voodoo video conference preparation - presenters
 
Design in Motion: Video Production Workflow
Design in Motion: Video Production WorkflowDesign in Motion: Video Production Workflow
Design in Motion: Video Production Workflow
 
ALA Alex
ALA AlexALA Alex
ALA Alex
 
A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...
A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...
A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...
 
A Science Project: Building a sound card based on the Covox Speech Thing
A Science Project: Building a sound card based on the Covox Speech ThingA Science Project: Building a sound card based on the Covox Speech Thing
A Science Project: Building a sound card based on the Covox Speech Thing
 

Kürzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 

[COSCUP 2013] Audio Competing