这篇文章主要介绍“Html5页面中怎么播放M4a音频文件”,在日常操作中,相信很多人在Html5页面中怎么播放M4a音频文件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Html5页面中怎么播放M4a音频文件”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

业务场景:

手机app端录音,然后上传至后台服务器,前端从后台服务器获取录音,在PC端WEB页面播放。

实际问题:

首先app录音文件默认是m4a格式,而在PC端WEB H5页面,<audio>标签并没有明确写着支持m4a格式,如果app端生成的录音不做相关设置,而用默认设置,在H5上确实是播放不了的。

其实一开始,我没有想太多,也是想着把m4a文件转成mp3给前台用。

在网上查了一番,很多都说用jave-1.0.2.2.jar,然而其实这个包很旧,而且在windows上是可以转,但centos8上不支m4a格式转码,在系统上有兼容性问题。信我,别用它。

然后又在码库里找了比较靠谱的是这个包,这个包也是基于ffmpeg的,提供了支持win64、osx64、linux64的依赖,建义在maven打包时,根据开发或生产环境的不同,打包时引用相应环境的依赖。

下面附上我的m4a转mp3的java代码:

pom.xml

<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com</groupId><artifactId>test</artifactId><version>1.0.0-SNAPSHOT</version><packaging>pom</packaging><properties><jave.version>2.7.1</jave.version></properties><dependencyManagement><dependencies><!--录音转换,jave-all-deps包涵了所有平台的依赖,由于打包太大,建议打包时选指定的依赖--><!--<dependency>--><!--<groupId>ws.schild</groupId>--><!--<artifactId>jave-all-deps</artifactId>--><!--<version>${jave.version}</version>--><!--</dependency>--><!--录音转换,指定平台依赖,jave-core必需指定--><dependency><groupId>it.sauronsoftware</groupId><artifactId>jave</artifactId><groupId>ws.schild</groupId><artifactId>jave-core</artifactId><version>${jave.version}</version></dependency></dependencies></dependencyManagement><!--激活profile配置,用来切换不同环境的配置--><profiles><profile><id>dev</id><properties><profiles.actives>dev</profiles.actives></properties><activation><activeByDefault>true</activeByDefault><activeByDefault>false</activeByDefault></activation><dependencies><dependency><groupId>ws.schild</groupId><artifactId>jave-nativebin-linux64</artifactId><version>${jave.version}</version></dependency></dependencies></profile><profile><id>pro</id><properties><profiles.actives>pro</profiles.actives></properties><activation><activeByDefault>false</activeByDefault></activation><dependencies><dependency><groupId>ws.schild</groupId><artifactId>jave-nativebin-linux64</artifactId><version>${jave.version}</version></dependency></dependencies></profile><profile><id>test</id><properties><profiles.actives>test</profiles.actives></properties><activation><activeByDefault>true</activeByDefault></activation><dependencies><dependency><groupId>ws.schild</groupId><artifactId>jave-nativebin-win64</artifactId><version>${jave.version}</version></dependency></dependencies></profile></profiles></project>

录音文件转换代码:

packagecom.utils;importcom.alibaba.fastjson.JSON;importcom.qirui.framework.common.base.syslog.SysLog;importcom.qirui.framework.common.base.syslog.SysLogAnnotation;importcom.qirui.framework.common.base.syslog.SysLogPrint;importcom.qirui.framework.common.utils.RequestUtil;importorg.springframework.stereotype.Component;importws.schild.jave.*;importjava.io.BufferedOutputStream;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;/***@ClassNameAudioTransUtil*@Description录音转换*@Authoradmin*@Version1.0.0**/@ComponentpublicclassAudioTransUtil{static{//项目是springbootjar包,jar包内的代码要读取外面文件夹的文件,需要处理一下读取路径,//这里是把录音源文件和转换文件放在springbootjar包的同级文件夹下Stringpath=AudioTransUtil.class.getProtectionDomain().getCodeSource().getLocation().getPath();if(path.contains("jar")){//file:/F:/ideaWorkspace/test/smp-admin/framework-client/target/framework-client-0.0.1-SNAPSHOT.jar!/BOOT-INF/lib/framework-service-0.0.1-SNAPSHOT.jar!///去掉"file:"path=path.substring(path.indexOf("/"),path.length());}if(System.getProperty("os.name").contains("dows")){path=path.substring(1,path.length());//widonws的jar包if(path.contains("jar")){path=path.substring(0,path.indexOf(".jar"));rootPath=path.substring(0,path.lastIndexOf("/"));}else{rootPath=path.replace("/target/classes/","");}}elseif(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("/"));}}protectedstaticfinalStringrootPath;/***目录路径*/privatestaticfinalStringBuilderdirPathStr=newStringBuilder(rootPath).append("/temp/audio/");privatestaticfinalStringMP3="mp3";@SysLogAnnotation(descript="录音转换格式")publicStringtrans2Mp3(byte[]sourceAudioBytes,StringsourceAudioName){//文件路径StringsoureAudioFilePathStr=newStringBuilder(dirPathStr).append(sourceAudioName).toString();StringsourceAudioType=sourceAudioName.substring(sourceAudioName.indexOf(".")+1);StringtargetAudioFilePathStr=newStringBuilder(soureAudioFilePathStr).toString().replace(sourceAudioType,MP3);BufferedOutputStreambos=null;FileOutputStreamfos=null;try{Filedir=newFile(dirPathStr.toString());if(!dir.exists()){dir.mkdirs();}FilesourceAudioFile=newFile(soureAudioFilePathStr);fos=newFileOutputStream(sourceAudioFile);bos=newBufferedOutputStream(fos);bos.write(sourceAudioBytes);FiletargetAudioFile=newFile(targetAudioFilePathStr);AudioAttributesaudioAttributes=newAudioAttributes();audioAttributes.setCodec("libmp3lame");audioAttributes.setBitRate(newInteger(32000));//audioAttributes.setChannels(newInteger(2));//audioAttributes.setSamplingRate(newInteger(22050));EncodingAttributesattrs=newEncodingAttributes();attrs.setFormat("mp3");attrs.setAudioAttributes(audioAttributes);Encoderencoder=newEncoder();//在有需要时添加,可根据不同系统环境,查看支持处理的文件格式System.out.println("encoder.getVideoDecoders():"+JSON.toJSON(encoder.getVideoDecoders()).toString());System.out.println("encoder.getSupportedDecodingFormats():"+JSON.toJSON(encoder.getSupportedDecodingFormats()).toString());MyJaveListenermyJaveListener=newMyJaveListener();encoder.encode(newMultimediaObject(sourceAudioFile),targetAudioFile,attrs,myJaveListener);}catch(Exceptione){e.printStackTrace();}finally{try{if(null!=bos){bos.close();}if(null!=fos){fos.close();}}catch(IOExceptione){e.printStackTrace();}}SysLogsysLog=newSysLog();sysLog.setLogId(RequestUtil.getAccessLogId());sysLog.setParams(targetAudioFilePathStr);sysLog.setDescript("录音转换路径");SysLogPrint.printSysLogBody(sysLog);returntargetAudioFilePathStr;}//删除本地临时录音publicvoiddeleteTempAudio(StringfileName){//文件路径StringfileNameTemp=fileName.substring(fileName.lastIndexOf("/")+1,fileName.length());StringsoureAudioFilePathStr=newStringBuilder(dirPathStr).append(fileNameTemp).toString();StringsourceAudioType=fileName.substring(fileName.indexOf(".")+1);StringtargetAudioFilePathStr=newStringBuilder(soureAudioFilePathStr).toString().replace(sourceAudioType,MP3);Filefile=newFile(soureAudioFilePathStr);file.delete();file=newFile(targetAudioFilePathStr);file.delete();}/***录音转码处理监听器,可监听文件处理结果,对于错误信息很有用*/privateclassMyJaveListenerimplementsEncoderProgressListener{@OverridepublicvoidsourceInfo(MultimediaInfomultimediaInfo){System.out.println("MyListener.sourceInfo:"+JSON.toJSON(multimediaInfo).toString());}@Overridepublicvoidprogress(inti){System.out.println("MyListener.progress:"+i);}@Overridepublicvoidmessage(Strings){System.out.println("MyListener.message:"+s);}}}

上面的代码,在centos8环境是可以正常转换的,开一始,我的生产环境也用了这份。

后来,我去找了m4a和mp3、mp4的区别,发现 mp4是使用了MPEG-4进行封装的AAC编码,而M4A的本质和音频MP4相同,它是区别纯音频MP4文件和包含视频的MP4文件而由苹果(Apple)公司使用的扩展名。

那么疑问来了,竟然m4a和mp4的本质相同,那么竟然浏览器H5可以播放mp4,为什么m4a不行,原因在音频的编码上,AAC编码是解决问题的关键。

默认如果不设置,AudioEncoder是0,0并不是AAC编码,我们需要在输出格式上设置MPEG_4,并把编码格式设置成AAC,

如第三图中所示:

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

这样,生成的m4a录音文件,就可以直接在浏览器H5页面中播放了,完全不需要后台,在整个程序个不仅少了代码的转码时间,本身m4a文件也很小。

到此,关于“Html5页面中怎么播放M4a音频文件”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!