Enabling background audio in my Windows Store HTML5 app - audio

I have an HTML5 Progressive Web App (PWA) that I've packaged into the Window Store thanks to PWABuilder. It's a Pandora-like music app that plays audio via the HTML5 audio tag.
The app works fine on Windows 10 until I minimize the app, then the audio stops playing. I want my app to keep playing audio even when minimized.
My first thought is I need to declare the appropriate capabilities in my app manifest. So, in my appxmanifest.xml, I added:
<Capabilities>
<uap3:Capability Name="backgroundMediaPlayback" />
</Capabilities>
But even with the backgroundMediaPlayback capability, it doesn't work; minimizing the app stops the audio.
Looking at the Universal Windows audio sample app, it says this should work:
"Adding the backgroundMediaPlayback capability enables all media
playback APIs become background enabled. That means you can use any
platform audio APIs, such as MediaPlayer, AudioGraph, XAudio2, and
the HTML Audio tag."
If I'm reading that right, it means simply adding the backgroundMediaPlayback capability should make my HTML5 audio tags work in the background. Is there something else I'm missing?

This sounds like the app is being suspended instead of using the Activity Sponsored Execution mode that's available for apps that declare the backgroundMediaPlayback capability (MS blog here).
Check to see if your app is being suspended when it's minimized.
Were you able to get the sample working?
UPDATE 1
It looks like your MinSDK and Target SDK are set to 10240 (the first version of Windows 10). Update the values to the following:
<TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.14393.0" MaxVersionTested="10.0.16299.0"/>
UPDATE 2
In addition to the SDK versions, you also need to add the SystemMediaTransportControls. See the 2nd bullet point in under the "Requirements for Background Audio" paragraph in this documentation article.
Resources
I tracked down the different documentation articles that piece this together.
In the Background Audio article's Single Process section defines the SDK version constraints as min version 1607 (aka Anniversary Update, OS Build/SDK 14393)
The UAP3 Capability manual
Play Media In The Background documentation
The Manifest schema changes documentation (per release)

Related

Unable to capture image in .Net MAUI

I am new to .Net MAUI and I never used the xamarin. I am trying to create a simple app (focused on android mainly) which records the audio and then plays it for them. So far, only one package has worked for me in this matter i.e. "Plugin.AudioRecorder" (https://github.com/NateRickard/Plugin.AudioRecorder) but, this package is not working with xiaomi devices. It is responding to the button click and navigating to the command but its startRecording function do nothing.
Here is my code.command snippet
I also need the audio transcription but that is a different story.

How does Scratch play sounds without any problem on mobile?

If you are familiar with scratch, you'll know that Scratch 3 was built to support mobile.
Javascript audio isn't working on mobile devices shows that mobile doesn't support auto playback of audio
Scratch seems to play audio without a problem...
Does anyone know the secret behind Scratch mobile audio playing capabilities? (share pieces of code which scratch uses to play audio on mobile)
(Incase you're wondering why I need to know this, I need to use it on my website)
Read the answer carefully.
Some mobile browsers support automatic playback of audio, but ios, chrome and others require interactive actions to trigger the sound playback.You can try working with the mute attribute..
Scratch can't play sounds automatically. You have to click the Start button on any project. By "interactive actions" they mean clicks, scroll etc,.

Rotate screen orientation on Web App Tizen [TV]

I'm developing a Web Application on Tizen. My application was first developed on other platforms like iOS and Android.
Basically it starts on Landscape mode and plays remote content such as image, video or opens a web page. It has a menu inside the app to offer people the ability to change the screen orientation inside the app manually.
This approach is quite easy on iOS and Android but on Tizen seems it doesn't work that easy.
I'm following Tizen's official documentation which send's us to : https://w3c.github.io/screen-orientation/
But, can't make it work even though I followed steps written on the link above.
This is what I got when I try to rotate:
Trying with :
screen.orientation.lock('portrait-primary')
Error :
Promise {}
index.html:1 Uncaught (in promise) DOMException: The page needs to be fullscreen in order to call screen.orientation.lock().
P.S. The app is already in fullscreen. The error is not relevant.
Do you have any ideas ?
Thank you
For all to those who are still trying to achieve this:
After having a long discussion with Samsung, they claimed that supporting the TV orientation via code is not possible right now (Not sure if it's gonna be implemented in the future).
These restrictions come due to different operability of the hardware components on different orientation.
The only way to rotate your screen is to do it via Samsung's TV Settings so that it can prepare its hardware for the chosen orientation.
There are a special Samsung TVs for Advertising market (Digital Signage series) that are ready to set the orientation of the screen.
I comercial Samsung TV sets Tizen is not able to rotate some kind of elements (as far I know the video object are one of the HTML elements that cannot be rotated)
I've developed some apps for Tizen and for one customer I tried to make a video wall but it was impossible due the firmware limitation of Tizen (it's a marketing strategy in order to avoid having hotel and digital signage capabilities in commercial TV sets)

How to make Azure Media Service hosted video auto play on mobile?

I am working on a project where by we are hosting and streaming video through Azure Media Service.
There is a particular video we have positioned as the hero background upon entry to the site. On desktop the video auto-play's and streams just fine but on mobile it does not autoplay at all. It simply showcases the preview image.
I'd love to be able to paste a link to the site but unfortunately due to the confidentiality of the project I am not able to. However, if there is something in particular you'd like me to post to help support the question please let me know.
The web-app is build using Angular.
Does anyone know how to fix this problem? or can point me in the right direction?
Check with the browser platform you are targeting on the mobile applications. Most mobile browsers have disabled autoplay. User MUST now initiate all playback actions.
Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/
Chrome 53 on Android also allowing muted video autoplay: https://developers.google.com/web/updates/2016/07/autoplay

Azure Media Services Live Streaming Preview Error

I'm trying to use preview url to preview my stream before go live, but always get an error "No compatible source was found for this media". When I start the event, I have no problem playing the actual streaming url, it plays perfectly in the Azure Media player.
And another question, I see a couple video tutorials and see that preview can be used in pass through channels, but I found this in the documentation: "When Live Encoding is enabled, you can now get a preview of the live feed as it reaches the Channel.", this means that only Standard channels can be used to see a preview? By the way, I tested in both channels, pass through and standard and get the same error in preview.
Update:
I'm using Chrome and just for curiosity, I open Azure Media Player in Internet Explorer and finally I can see the live feed in preview. So, what's the problem with Chrome?
you need to enable Flash in Chrome to be able to playback preview URLs from AMS because the previews are only available in the smooth streaming format. Smooth Streaming needs plugins like Flash or Silverlight to playback.
You can enable flash in a couple different ways but most commonly you can just go to content settings and enable it for whatever websites you're using.

Resources