My website is currently playing sounds when the user answers a question right/wrong. But I notice that on my tablet (iPad) and mobile (iPhone) it plays the sounds even though I put it in silence mode. And I don't want the phone/tablet to play sounds when the user has clearly set their device in silent mode (the Ringer). So, can I detect whether a device is muted/silenced and then not play any sounds? I tested on Safari and Chrome, and it always plays the sound, irrespective of the Ringer's state.
EDIT: If it is not possible to read this information, then my question would be if there is a way to play sounds that DOES respect the user's muting preferences? I am using jQuery's $("#correctsound").trigger('play'), and clearly this doesn't respect those settings. Do we have a different way to play sounds that takes these settings into account?
The simple answer to your question is no. Web pages don't have access to that kind of information about the client. More info here: Javascript: Can you read the systems volume? Furthermore, it is important to note that iOS has different volume settings for ringers and for media, according to Macworld:
The key to mastering volume adjustment is understanding that most of
the sounds on your device fall into one of two categories. General
audio includes music and other media, and the voice volume on the
iPhone and for FaceTime on all devices. The “ringers and alerts”
category includes not only the iPhone ringer, but also: FaceTime
rings; Clock app alarms; notifications and individual app alerts;
keyboard clicks; and miscellaneous app sounds like the whoosh of
sending Mail.
In other words, if a user wants to mute audio coming from web pages, they should mute the media volume. Ringer volume has nothing to do with web pages, so putting your phone in "silent" mode is only meant to affect the ringer volume. If you need help changing your device's volume settings, check out How can I lower the media volume on my iPhone when no media are playing? on the Apple Stack Exchange.
Related
I think all or most browsers do not let the server or even a client JavaScript code cause the automatic playing of a sound/audio.
Testing Chrome, the only way I found to play a sound automatically without any client interaction every time was that the client goes to the Chrome settings one time and manually adds a specific website (https//: example.com:443) and allows the sound from that website (permanently unless the browser settings are wiped out or manually removed). Also, allowing all the websites to play sound generally does not have the same effect of being specific in the settings.
I found that permission for push notifications is not required for this purpose. I banned www.example.com from sending push notifications; nevertheless, upon allowing sound manually in the settings, as I mentioned above, auto-play without client interaction was still possible.
How is that Skype for the web can get around this?
Skype can send its famous Skype ringtone to the client using the web version when someone from the contact list or an absolute stranger wants to call from another computer/web browser or from, a native phone app, or a desktop app (mac or windows):
https://www.skype.com/en/features/skype-web/
I guess that's because of Media Engagement Index
From the chrome's post
Autoplay with sound is allowed if:
The user has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Media Engagement Index
The Media Engagement Index (MEI) measures an individual's propensity to consume media on a site. Chrome's approach is a ratio of visits to significant media playback events per origin
Consumption of the media (audio/video) must be greater than seven seconds.
Audio must be present and unmuted.
The tab with the video is active.
Size of the video (in px) must be greater than 200x140.
From that, Chrome calculates a media engagement score, which is highest on sites where media is played on a regular basis. When it is high enough, media is allowed to autoplay on desktop only.
That's why some sites like youtube or skype for web can play sounds without prior user's interaction
This page is very useful in chrome about://media-engagement
I have noticed some web pages have somehow implemented a feature to prevent a screen capture of some regions of that web pages. By taking a screenshot of that webpage, instead of some regions that I can normally see live in a browser (Chrome), on a screenshot I can only see a black frame. Firefox doesn't seem to have this "feature" - screenshots are taken normally without black frames.
Example of such site is Netflix. It's not possible to take a screenshot (by "print screen" key on keyboard) of the running movie from Chrome (last update) on a desktop PC running Windows 11. The video controls (play/pause, video position bar ...) are visible, but the video itself is not (black frame).
What kind of javascript functionality/API is capable of this?
Limiting screen capture is called "Digital Right Management" from a vendor's perspective. From a user's perspective it's more like "Enduser Device Control".
It's scope of the Video Playback Pipeline, not JavaScript. JavaScript only facilitates key exchange so that you can decrypt the video locally. Depending on properties that can be ascertained to the video provider about your system, the quality of the video can be limited. Browsers will mostly only receive SD quality. Here's a JS snippet to enumerate the supported CDMs of your browser.
Regarding screenshot prevention: If it's not built into the OS, it will be a custom implementation like here(code) that will not prevent all possibilities to take a screenshots, e.g. using a 3rd party program. For Chrome it is said to be tangled to hardware acceleration, turn that off and screenshots are possible.
Though nothing can guard content against recording in the analog hole, though at least to prevent distribution of such recordings video providers add watermarks on a per user basis.
If you want to go the DRM route, see here for a simple scheme to setup yourself or contact one of the authorized Widevine partners to go for the L1 hardware level.
For further reading, DRM on Android is well documented and has some diagrams:
https://developers.google.com/widevine/drm/overview
https://source.android.com/docs/core/graphics/arch-st#st_vid_play
https://source.android.com/docs/core/media/drm
I am looking for a way to detect whether a sound is being played in the current tab of Chrome. I would like to emphasize that the context is a web app and not a chrome extension nor a single audio element. My assumption is that the browser "knows" that the tab is playing sound by displaying an audible icon in the tab header, so I am guessing that there is some kind of browser HTML5 API for that.
Simple answer: no
Long answer:
Some-what-ish would be the best case in this context.
Chrome has a dev-only API for it's browser that hooks on audio devices connected, but it's not possible to use this in a real environment. (source)
The chrome.audio API is provided to allow users to get information
about and control the audio devices attached to the system. This API
is currently only implemented for ChromeOS.
There is also an interesting solution answered by Jared Sohn, the principle is that a plugin (should be web possible as well) scans the webpage for files playing audio. You could rewrite something like this for your webpage (by grabbing all possible sources for audio and checking them individually). (source)
Perhaps the closest that you can do is something similar to what the
MuteTab Chrome extension does (written by me,
http://www.github.com/jaredsohn/mutetab), which basically scans the
page for object, embed, audio, video, and applet tags and hides them
from the page. Unfortunately, this misses web audio
When I establish a WebRTC connection with output and input (video and microphone) on chrome for Android, when controlling the volume slider using hardware keys, I will get shown the volume for the STREAM_VOICE_CALL stream, which is not the right stream for the WebRTC. This make it impossible for the user to effectively control the volume.
I'm guessing this is happening because when I turn on the microphone (with getUserMedia), the system thinks i'm in a call.
Any ideas on how to fix this? Is it expected behavior or a chrome bug?
Thanks
Is that how it is built now? At least chromium issue 243506 tells the following:
Enable audio volume control on Android.
This is done by setting stream to VOICE which is the only stream type hooking up volume control automatically.
It's required to use matching audio mode and stream type. Otherwise, the volume control doesn't work. That means we have to use same mode
for both WebAudio and WebRTC. This leads to the change in audio_manager_android.cc which sets audio to communication mode so that OpenSL
stream can use VOICE stream type to adjust volume.
Bold is added by me.
(https://code.google.com/p/chromium/issues/detail?id=243506)
Looks like its already fixed in latest Chrome version.
I've been looking for a solution that detects the difference between the default speakers and headphones on a computer. I understand that with Web Audio API, AudioDestinationNode represents the output device, where users hear audio.
My question (to be specific) is whether or not it is possible to detect a change in the users' audio output device (wired/wireless headphones). If this is not possible, is there a way to use phonegap to do so, for computers as well as mobile devices?
My goal is to initiate an event only when the AudioDestinationNode maps to headphones or external speakers.
There's nothing in the Web Audio API spec for this.
It might be possible in Phonegap (at least if you were willing to write your own Phonegap plugin) – but that's only going to help on mobile. As far as I know, there's no way to determine the audio output device in any of the major desktop browsers.
Just out of curiosity, what are you hoping to do as a result of the user switching between built-in speakers and an external device?