电脑系统城官网 - 一键重装系统-Win7旗舰版/win10 64位系统下载,唯一官网:www.pcxitongcheng.com!

当前位置:首页 > 网页制作 > HTML/Xhtml > 详细页面

HTML5之audio属性

时间:2020-03-04来源:电脑系统城作者:电脑系统城

audio主要支持的音频格式:

mp3  ogg wav

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!-- 方法一 -->
    <audio controls>
        <source src="data/imooc.mp3"></source>
    </audio>

    <!-- 方法二 -->
    <audio controls src="data/imooc.mp3"></audio>
</body>
</html>
复制代码

 

 source的级别没有直接在audio中写src高

 

关于兼容性:

mp3 所有浏览器都兼容

ogg  safari浏览器不兼容,其他都可

wav 所有浏览器都兼容

 

可以使用JS生成audio对象

复制代码
    <button id="btn">play</button>
    <script>
        var myaudio=new Audio();
        myaudio.src="data/imooc.mp3";

        //谷歌和欧朋不能直接播放,必须与事件交互
        //其他浏览器可以
        btn.onclick=function(){
            myaudio.play();
        }
    </script>
复制代码

 

audio标签属性

 

 

autoplay 自动播放,谷歌和欧朋不能自动播放(和video的区别是即使设置了静音也不会自动播放)

<audio controls src="data/imooc.mp3" autoplay></audio>

 

没有width和height属性,需要通过style来控制

<audio controls src="data/imooc.mp3" autoplay width="500"></audio>

 

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
    <style>
        audio{
            width:500px;
        }
    </style>
</head>
<body>
    <audio controls src="data/imooc.mp3" autoplay></audio>
</body>
</html>
复制代码

 

 

 

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载

公众号