How to apply and solve HTML5 audio?

There are many articles that describe the poor status of HTML5 audio support. That is the case, so I will not repeat this view here. Instead, I focus on the issues and potential solutions that developers will encounter on a particular platform.

HTML5 Audio from Codecanyon.ne

Table

The above table summarizes the current market share of Web browsers. Internet Explorer is still the main desktop browser, followed by Chrome and Firefox. In the Mobile world, Safari dominates the market, thanks largely to the powerful iOS brand, followed by Android. Therefore, we will discuss them in this order.

Recommendations for developers who have just begun to implant audio content: It is recommended to use Soundmanager 2 on the audio layer. Currently, this is the best JavaScript audio library. The implant process is simple and the API is neat and can be obtained with the BSD Open source license. In addition, this tool excels in providing free third-party code updates and maintenance.

Internet Explorer

The versions of IE 8 and below do not support HTML5 canvas and audio, so this goes back to: The image section is based on DOM operations, and the audio portion is through flash technology. Using Soundmanager 2 allows you to save a lot of trouble in the old version of IE's support for HTML5 audio.

IE 9 is completely different. HTML5 Canvas and audio performance highlight. If Microsoft abandons the use of win XP Os,ie 9, it will increase significantly.

This will be a smart move for Microsoft.

Chrome

Chrome 18 and later support HTML5 audio and canvas. However, HTML5 audio works smoothly only if the Web server supports partial downloads. The symptoms of this problem are:

* Audio cannot be replayed

* Unable to control replay location

* Audio playback stops once, but "end" event is not activated

The simplest way to solve this problem is to start a remote request on the Web server. Note that Google APP engine does not support remote requests, but we can address this issue by executing a file service program that supports remote requests.

Another way to avoid this problem is to avoid using the built-in loop function, "Rewind" through the load () function, and play the audio here. This solves the problem, but it can increase the load on the Web server. When the load function is called in the audio instance, the Web browser extracts the audio data from the Web server.

Another option is to use the Web Audio API. The main drawback is that only chrome supports the Web Audio API at this time, and only version 18 or later is supported. Its outstanding advantage is that the Web audio API solves all the drawbacks of HTML5 audio by providing volume and pan control and instant filtering.

Safari

Both Safari and Chrome are WebKit-based browsers with similar pros and cons. Like Chrome, Safari supports HTML5 canvas and audio, but Safari doesn't support the Google Web audio API.

Unfortunately, Safari also has a similar flaw to safari-it differs from the audio provided by Web servers that do not support partial downloads. The symptoms of safari are different:

* Small/short audio no problem

* Verbose audio will not play, will send audio file format damaged error prompt

The simplest way to solve this problem is to enable some of the download features of the Web server. Remediation methods see the Chrome section for details.

Firefox

Firefox 3.6 and later supports HTML5 canvas and audio. But there are many holes in the audio support for Firefox 3.6-Short audio doesn't play and medium-length audio doesn't matter. If you are looking for more advanced audio support, the Mozilla Foundation is currently implementing its own web audio Api--audio Data API.

iOS mobile platform (Safari mobile platform)

Safari Mobile contains all the pros and cons of a desktop browser, and it also has a limitation-all HTML5 audio must be activated through user interaction. This restrictive condition brings two major drawbacks.

First, this restriction prevents audio from being pre-cached/preloaded. Therefore, any application that waits for an audio "Canplaythrough" event to detect pre-loaded audio will fall into a suspended state. Second, activating audio playback events is tricky because Apple is aggressively resisting non-user-activated audio playback-a constraint that once had a workaround: Simulate a Click event via JavaScript, but this method is no longer applicable from iOS 4.2.x.

Finally, flash audio playback tips are not available on the iOS platform because iOS does not support Flash technology.

iOS has only two options--Disable all audio, continue to provide apps through a Web browser, or keep all audio, and distribute HTML5 apps as native apps via Appmobi, PhoneGap, or Appcelerator. For game development, I recommend using Appmobi because it has the canvas accelerator function.

Android (built-in browser)

As long as your OS platform is less fragmented. There are many versions of Android that make HTML5 audio support hard to come to the final conclusion. For the current number of variants of the Android OS, it is advisable to check the Yui Theatre video "Scaling Mobile with YUI". At 22 points, the narrator presents a slideshow that contains an incomplete list of Android OS versions on the market today.

These are the common audio features of the platform:

* Android 2.x seems to support HTML5 audio, but it can't play audio. Fortunately, the app continues to work smoothly-all audio function calls return the appropriate results, and the load/cache events are properly activated.

* ICS (Android 4.x) supports HTML5 audio, which is capable of playing audio. But playback is limited to one sound at a time, and the most recently played audio will replace all previous audio playback.

I did not test Android 3.x for HTML5 audio performance.

Fortunately, Android supports Flash integration, so playing back flash audio is feasible. However, Flash is an optional Google app, so not all Android phones have this app installed. Unfortunately, I don't have any data on the penetration of the mobile flash market. In any case, this approach is not recommended because Adobe has abandoned support for mobile flash technology, so in the near future, this will probably disappear.

The best way to ensure proper audio support is to take a local route and publish the HTML5 app via Appmobi, PhoneGap, or Appcelerator. Regarding game development, I recommend Appmobi because it plans to add accelerated canvas support on the Android platform (game State Note: This feature is currently in beta).

Summarize

The path to HTML5 audio is covered with thorns. I suggest using Soundmanager 2, which can save you a lot of trouble. On the mobile platform, the situation is not so clear. Consider taking local routes and distributing HTML5 applications in native applications using HTML5 native application platforms such as Asappmobi, PhoneGap, or Appcelerator. With regard to game development, the best HTML5 native application platform is now Appmobi.

How to apply and solve HTML5 audio?