Audio in browser


#1

I went to use NativeAudio in a browser, as it says it supports it, but get this error:

Native: tried calling NativeAudio.play, but Cordova is not available.

Without Cordova, how does NativeAudio work in a browser?
Alternatives?

Supported platforms
Android
Browser
iOS

#2

How are you running your app?
It won’t work with ionic serve, only with the browser platform for browser. So ionic cordova run browser. That one is only semi supported, but many use seem to use it right now.


#3

I run npm run ionic:build --prod
This produces a 2.07mb build and runs great in browsers.

When I runionic cordova run browser, it produces a build 12.7mb in size.
Is this what Ionic expects for its purposed PWA advancements?
I saw no mention of having to use ionic cordova run browser to enable NativeAudio in the docs.

When I provide the app to browsers, I do not include Cordova.js. Everything else works but NativeAudio.
You say it is semi-supported. The additional 10mb to include NativeAudio is not a reasonable trade-off.

What is the current alternative for playing sounds in Ionic for browsers.


#4

I have not tested against multiple browsers yet but this seems to work so far:
new Audio('assets/sounds/beep.mp3').play();


#5

Ionic Native is a wrapper for Cordova. That means Ionic Native only works when Cordova is present. browser is one of the platforms that come with Cordova, but is not really thought to be used by Ionic - but there is nothing to prevent you, that’s why I said “semi supported”. If the file size does prevent you to use it, you seem to have to find another option.


#6

I was under the impression that some IonicNative components work without Cordova present.
eg: GeoLocation. I use it in browsers with no Cordova.


#7

That only works when the browser implementation of the functionality uses the same interface as the Cordova plugins. As this was the goal of the core Cordova plugins in the beginning (to cease to exist when browsers implement this stuff themselved) this sometimes works. From what you describe Audio is (not yet) one of them.


#8

That makes sense. I suppose it will be hit and miss for a while on whether any item ( eg: Audio ) requires Cordova, as it is not indicated in the docs and would vary among browsers.
Thanks for following up with an explanation.


#9

It’s one of those murky areas… all the PWA stuff is pretty new, as only in the last few months it became really interesting to also build web apps with Ionic (and in general!). Cordova itself is also working on a cleanup of their plugins, removing the cruft that is still there but not needed any more because browsers caught up.

If you discover anything interesting, and if it is just what works and what doesn’t, please open a topic in the forum (or reply here) to write it down and let all of us know. I think this will get more and more interesting in the next few months.


#10

I’m quite happy with how Ionic is working in browsers - without Cordova.
There are mixed messages out there about what can or cannot be done with and without Cordova.
Another poster asked this question:

… can i use Cordova in Ionic PWA?

And received this answer:

No. Cordova Plugins use native device code (Swift, JAVA) to perform their functions.

Which does not fall in-line with using browser platform mentioned in this topic.

For what works and what doesn’t:
NativeAudio might work in browser platform, I cannot say as I did not go down that road far enough to be certain but it ‘appears’ to not work without including Cordova.
I am opting for using new Audio(); - at least for my current projects.


#11

Other way around: I don’t fall in line with the official line that the browser platform should not be mentioned and used… :wink: The official line is "Run ionic serve or npm run ionic:build and copy the output out of www and use that as your PWA. I think.


#12

I hear you.
I run npm run ionic:build --prod
This produces a 2.07mb build and runs great in browsers.


#13

Is ionic cordova run browser --prod that much bigger?


#14

Hey hey, you’re right - I did not add the --prod in my previous browser platform build.
ionic cordova run browser --prod is the same size as npm run ionic:build --prod
( --prod shaved off 10mb )

That’s great - now I’ll go back and try NativeAudio again.
Thanks for sticking to this like glue!


#15

NativeAudio works in the browser when including Cordova using ionic cordova run browser --prod

It does not work if Cordova is not included and using npm run ionic:build --prod

While using the Browser platform with Cordova only increased my app size by about .3mb, it did create havoc with some of my other implementations, particularly OneSignal. But that is another issue.

For this particular project, I will be using new Audio().
Future projects, I’ll definitely consider including Cordova in Browser platform build.

Thanks for the great assistance.


#16

Guy, any idea on handle this?