在JavaScript脚本中获取<audio.../>元素对应的对象为HTMLAudioElement对象，<video.../>元素对应的对象为HTMLVideoElement对象。

　　HTMLAudioElement对象和HTMLVideoElement对象支持的方法有如下几个：

  • play()：播放视频、音频
  • pause()：暂停播放
  • load()：重新装载音频、视频文件
  • canPlayType(type)：判断该元素是否可以播放type类型的音频、视频。该属性指定该音频、视频文件的类型，该属性值既可以是简单的MIME类型，例如audio/ogg、audio/mpeg等，也可以是MIME字符串并带codecs属性，codecs属性用于指定该视频文件的编码格式。该方法可以返回如下3个值
    • probably：该浏览器支持播放此种类型的音频、视频
    • maybe：该浏览器可能支持播放此种类型的音频、视频
    • 空字符串：该浏览器不支持播放此种类型的音频、视频

 

　　下面页面代码实现了一个简单的音乐播放器，支持两种播放模式：随机播放和顺序播放。

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 音乐播放器 </title>
    <script type="text/javascript">
        // 定义能播放的所有音乐
        var musics = [
            "demo1.ogg",
            "bomb.ogg",
            "arrow.ogg",
            "love.ogg",
            "song.ogg",
        ];
        // 定义正在播放的音频文件的索引
        var index = 0;
        // 记录顺序播放、随机播放的变量
        var playType;
        var player;
        window.onload = function()
        {
            var typeSel = document.getElementById("typeSel");
            // 当用户更改下拉菜单的选项时，改变播放方式
            typeSel.onchange = function()
            {
                window.playType = typeSel.value;
            }
            player = document.getElementById("player");
            // 页面加载时播放第一个音频文件
            player.src = musics[index];
            player.onended = function()
            {
                if(playType == "random")
                {
                    // 计算一个随机数
                    index = Math.floor(Math.random() * musics.length);
                    // 随机播放一个音频文件
                    player.src = musics[index];
                }
                else
                {
                    // 播放下一个音频文件
                    player.src = musics[++index % musics.length];
                }
                // 播放
                player.play();
            }
        }
    </script>
</head>
<body>
<h2> 音乐播放器 </h2>
<select id="typeSel" style="width:160px">
    <option value="sequence">顺序播放</option>
    <option value="random">随机播放</option>
</select><br/>
<audio id="player" controls>
您的浏览器不支持audio元素
</audio>
</body>
</html>

 

页面效果如下：