HTML5快速入门实例(六)audio元素静态加载和动态加载实例

时间:2021-07-08 14:38:26

例子一:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<audio controls="controls">
    <source src="4.mp3" type="audio/mpeg">
    <source src="6.wma" type="audio/ogg">
    浏览器不支持audio元素
    <!-- 注意有些格式某些浏览器不支持,为避开这个限制,可以准备多个不同格式的音频文件,以供浏览器选择并播放。
     audio标签中允许出现多个<source>标签,浏览器会自动使用第一个支持的格式.
     也可以在js中使用audio对象来动态加载音频。根据需要,我们通过audio对象控制音频的加载、播放、暂停,这也是我们游戏中采取的方法
     下一章演示
    -->
</audio>
</body>
</html>

效果:

HTML5快速入门实例(六)audio元素静态加载和动态加载实例

例子二:动态加载音频

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<script type="text/javascript">
    //创建一个audio对象
    document.write("hello world2");
    var sound = new Audio();
    //选择文件
    sound.src = "4.mp3";
    //播放
    sound.play();
</script>
</body>
</html>