Play offline audio __ios in IOS Safari

Playing cached audio on iOS's Safari browser for offline use has been a challenge that has proven impossible to accomplish. But with the development of the Network audio API (which supports only the WebKit kernel), it is now finally implemented-but there are some steps to be made.

The bad news is that we can't cache the MP3 file using the application cache, and then simply load it with XMLHttpRequest. The Safari browser on the iOS6 can cache MP3, but it will be denied playback.

But this does not mean that there is no medicine to save ...

using BASE64 encoding

Because the Network Audio API provides audiobuffer for developers, you can now use it to transform data formats and play them directly using the network audio APIs. For example, if you encode a MP3 file as a Base64, you can decode it to a arraybuffer and turn it into the original audio data.

Encoding audio files

You can easily convert a MP3 file to a Base64 string using OpenSSL. The MacOS x system is pre-installed with OpenSSL, so just open the terminal program and type the following command:

OpenSSL base64-in [infile]-out [outfile]

Be sure to replace [infile] with your MP3 path and replace [outfile] with the target path of the encoded data you selected.

This will output the sound file as a Base64 encoded string. You can then choose to use any form of networked storage (such as application caching, local storage, or websql) to cache strings.

Base64 to Arraybuffer

To decode the Base64 string into Arraybuffer, you need to use a custom method. Daniel Greyrot's base64-binary.js is a good script that can be used precisely to achieve this goal. It converts the Base64 string into an array of uint8array types and stores it in a arraybuffer.

Once you do this, you can simply use the Decodeaudiodata () method of the network audio API to decode the audio data:

var buff = Base64binary.decodearraybuffer (sound);
Myaudiocontext.decodeaudiodata (Buff, function (audiodata) {
    mybuffer = audiodata; 
});

Once your audio data is decoded, pass it to the audio buffer source and play the sound:

MySource = Myaudiocontext.createbuffersource ();
Mysource.buffer = Mybuffer;
Mysource.connect (myaudiocontext.destination);
Mysource.noteon (0);

Demo and source code

Here is the online demo and source code.

Browser Support

This demo now supports the Safari 6,chrome desktop and IOS6 Safari browsers. The technology will work in any browser that supports the network audio API, so I hope the Chrome mobile browser can add support as soon as possible.

The consortium is currently perfecting the network Audio API standard.

From: http://html5doctor.com/taking-web-audio-offline-in-ios-6-safari/

Reprint please specify the Source: Shiyute blog-http://blog.csdn.net/hfahe