Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to play M4a audio files in Html5 pages". In daily operation, I believe that many people have doubts about how to play M4a audio files in Html5 pages. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to play M4a audio files in Html5 pages". Next, please follow the editor to study!

Business scenario:

The recording on the app end of the mobile phone is uploaded to the backend server, and the front end obtains the recording from the backend server and plays it on the WEB page on the PC.

Practical problems:

First of all, the app recording file is in M4a format by default, but on the WEB H5 page on PC, the label does not clearly say that M4a format is supported. If the recording generated by app does not make relevant settings, but uses the default setting, it really cannot be played on H5.

In fact, at the beginning, I didn't think too much about it. I also wanted to convert the M4a file into mp3 for the receptionist.

Checked on the Internet, many said to use jave-1.0.2.2.jar, but in fact this package is very old, and can be transferred on windows, but the centos8 does not support M4A format transcoding, there is a compatibility problem on the system. Trust me, don't use it.

Then I found a more reliable package in the code base, which is also based on ffmpeg and provides dependencies that support win64, osx64 and linux64. Jianyi refers to the dependencies of the corresponding environment when packaging maven, depending on the development or production environment.

The java code of my M4a to mp3 is attached below:

Pom.xml

4.0.0 com test 1.0.0-SNAPSHOT pom 2.7.1 It.sauronsoftware jave ws.schild jave-core ${jave.version} dev dev true False ws.schild jave-nativebin-linux64 ${jave.version} pro pro False ws.schild jave-nativebin-linux64 ${jave.version} test test True ws.schild jave-nativebin-win64 ${jave.version}

Recording file conversion code:

Package com.utils; import com.alibaba.fastjson.JSON;import com.qirui.framework.common.base.syslog.SysLog;import com.qirui.framework.common.base.syslog.SysLogAnnotation;import com.qirui.framework.common.base.syslog.SysLogPrint;import com.qirui.framework.common.utils.RequestUtil;import org.springframework.stereotype.Component;import ws.schild.jave.*; import java.io.BufferedOutputStream;import java.io.File;import java.io.FileOutputStream;import java.io.IOException / * @ ClassName AudioTransUtil * @ Description recording conversion * @ Author admin * @ Version 1.0.0 * * / @ Componentpublic class AudioTransUtil {static {/ / the project is a springboot jar package. The code in the jar package needs to process the read path to read the files in the external folder. / / here, put the recording source files and conversion files in the same folder of the springboot jar package String path = AudioTransUtil.class.getProtectionDomain () .getCodeSource () .getLocation () .getPath () If (path.contains ("jar")) {/ / fileDrexample (path.contains ("jar")) {/ / FileDrexFormlGideaWorkspaceGetSmpReladminpframeworkAfter path = path.substring (path.indexOf ("/"), path.length () } if (System.getProperty ("os.name"). Contains ("dows") {path = path.substring (1, path.length ()); / / jar package if of widonws (path.contains ("jar")) {path = path.substring (0, path.indexOf (".jar")) RootPath = path.substring (0, path.lastIndexOf ("/"));} else {rootPath = path.replace ("/ target/classes/", "");}} else if (System.getProperty ("os.name"). Contains ("Mac")) {rootPath = path.replace ("/ target/classes/", "") } else {path = path.substring (0, path.indexOf (".jar")); rootPath = path.substring (0, path.lastIndexOf ("/"));}} protected static final String rootPath; / * directory path * / private static final StringBuilder dirPathStr = new StringBuilder (rootPath) .append ("/ temp/audio/"); private static final String MP3 = "mp3" @ SysLogAnnotation (descript = "recording conversion format") public String trans2Mp3 (byte [] sourceAudioBytes, String sourceAudioName) {/ / File path String soureAudioFilePathStr = new StringBuilder (dirPathStr) .append (sourceAudioName) .toString (); String sourceAudioType = sourceAudioName.substring (sourceAudioName.indexOf (".") + 1); String targetAudioFilePathStr = new StringBuilder (soureAudioFilePathStr). ToString (). Replace (sourceAudioType, MP3); BufferedOutputStream bos = null; FileOutputStream fos = null Try {File dir = new File (dirPathStr.toString ()); if (! dir.exists ()) {dir.mkdirs ();} File sourceAudioFile = new File (soureAudioFilePathStr); fos = new FileOutputStream (sourceAudioFile); bos = new BufferedOutputStream (fos); bos.write (sourceAudioBytes) File targetAudioFile = new File (targetAudioFilePathStr); AudioAttributes audioAttributes = new AudioAttributes (); audioAttributes.setCodec ("libmp3lame"); audioAttributes.setBitRate (new Integer (32000)); / / audioAttributes.setChannels (new Integer (2)); / / audioAttributes.setSamplingRate (new Integer (22050)); EncodingAttributes attrs = new EncodingAttributes (); attrs.setFormat ("mp3") Attrs.setAudioAttributes (audioAttributes); Encoder encoder = new Encoder (); / / if necessary, you can view the file format System.out.println ("encoder.getVideoDecoders ():" + JSON.toJSON (encoder.getVideoDecoders ()). ToString ()) that supports processing according to different system environments. System.out.println ("encoder.getSupportedDecodingFormats ():" + JSON.toJSON (encoder.getSupportedDecodingFormats ()). ToString ()); MyJaveListener myJaveListener = new MyJaveListener (); encoder.encode (new MultimediaObject (sourceAudioFile), targetAudioFile, attrs, myJaveListener);} catch (Exception e) {e.printStackTrace () } finally {try {if (null! = bos) {bos.close ();} if (null! = fos) {fos.close ();}} catch (IOException e) {e.printStackTrace () } SysLog sysLog = new SysLog (); sysLog.setLogId (RequestUtil.getAccessLogId ()); sysLog.setParams (targetAudioFilePathStr); sysLog.setDescript ("recording conversion path"); SysLogPrint.printSysLogBody (sysLog); return targetAudioFilePathStr } / / Delete local temporary recording public void deleteTempAudio (String fileName) {/ / File path String fileNameTemp = fileName.substring (fileName.lastIndexOf ("/") + 1, fileName.length ()); String soureAudioFilePathStr = new StringBuilder (dirPathStr) .append (fileNameTemp). ToString (); String sourceAudioType = fileName.substring (fileName.indexOf (".") + 1) String targetAudioFilePathStr = new StringBuilder (soureAudioFilePathStr). ToString (). Replace (sourceAudioType, MP3); File file = new File (soureAudioFilePathStr); file.delete (); file = new File (targetAudioFilePathStr); file.delete () } / * recording transcoding processing listener that listens to file processing results and is useful for error messages * / private class MyJaveListener implements EncoderProgressListener {@ Override public void sourceInfo (MultimediaInfo multimediaInfo) {System.out.println ("MyListener.sourceInfo:" + JSON.toJSON (multimediaInfo) .toString ()) } @ Override public void progress (int I) {System.out.println ("MyListener.progress:" + I);} @ Override public void message (String s) {System.out.println ("MyListener.message:" + s);}

The above code can be converted normally in the centos8 environment. At the beginning, I also used this in my production environment.

Later, I went to find the difference between M4A and mp3, mp4, and found that mp4 uses MPEG-4 to encapsulate AAC coding, while M4A is essentially the same as audio MP4, which is the extension used by Apple to distinguish audio-only MP4 files from MP4 files that contain video.

So the question arises, the essence of M4A and mp4 is the same, then the browser H5 can play mp4, why not M4a, because in the audio coding, AAC coding is the key to solve the problem.

By default, if AudioEncoder is not set, it is not AAC encoding. We need to set MPEG_4 on the output format and set the encoding format to AAC.

As shown in the third figure:

SetOutPutFormat (MediaRecorder.OutputFormat.MPEG_4) setAudioEncoder (MediaRecorder.AudioEncoder.AAC)

In this way, the generated M4A recording file can be played directly in the browser H5 page without background at all. in the whole program, not only the transcoding time of the code is reduced, but also the M4A file itself is very small.

At this point, the study on "how to play M4a audio files in Html5 pages" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.