html5如何在手机浏览器上播放mp3文件

html-css04

html5如何在手机浏览器上播放mp3文件,第1张

这跟音频文件格式和浏览器是什么有关系,

由于在支持 HTML5 的所有浏览器中仅存在几种支持的格式,因此要赢得最大范围的受众,则可以使用 source 元素指定要尝试的多种文件格式。

<audio controls="true">

        <source src="demo.mp3" type="audio/mp3"> 

        <source src="demo.ogg" type="audio/ogg"> 

        <source src="demo.aac" type="audio/mp4"> 

        <!-- If no support at all. -->

        HTML5 audio not supported 

    </audio>

audio 对象将提供 canPlayType 方法以便预测试浏览器 的文件格式功能。 canPlayType 方法带有一个音频 mime 类型、编解码器(可选)参数,并且返回三个字符串之一:empty、maybe 或 probably。根据返回值也可以确定浏览器是否能播放文件

<!DOCTYPE>

<html>

<head>

        <meta charset="utf-8" />

    <script type="text/javascript">

        var audioTag = document.createElement('audio')

        if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {

            AudioPlayer.embed("audioplayer_1", {soundFile: "your.mp3", transparentpagebg: "yes"})

            $( '#audioplayer').hide()

     }

        else 

        {

$( '#audioplayer' ).audioPlayer()

        }

</script>

</head>

<body>

  <p id="audioplayer_1"></p>

<audio id="audioplayer" preload="auto" controls style="width:100%" >

    <source src="xxxxxxxx.mp3" type="audio/mp3">

        <!-- 这里SRC中的就是音乐文件的名字,改成你电脑上的。音乐文件要和html文件在同一目录下-->

</audio>

</body>

</html>