在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>

页面效果如下：

使用JavaScript脚本控制媒体播放（顺序播放和随机播放）的更多相关文章

  1. 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...

  2. 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

    前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...

  3. MP3中设置播放顺序的软件《闪存式MP3伴侣》

    给姥爷买了一个插卡音箱,里面拷贝了几百段评书,每一段评书都是一个mp3文件,虽然插卡音箱会自动一个文件一个文件自动播放,可是比较郁闷的是评书的播放顺序完全是乱的,毫无规律可寻,本来我的mp3文件的文件 ...

  4. Unity3D中脚本的执行顺序和编译顺序

    http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与 ...

  5. 【转】Unity3D中脚本的执行顺序和编译顺序（vs工程引用关系）

    http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与 ...

  6. 5. Unity脚本的执行顺序

    Unity是不支持多线程的,也就是说我们必须要在主线程中操作它,可是Unity可以同时创建很多脚本,并且可以分别绑定在不同的游戏对象身上,他们各自都在执行自己的生命周期感觉像是多线程,并行执行脚本的, ...

  7. （转）Unity3D中脚本的执行顺序和编译顺序（vs工程引用关系）

    自:http://www.cnblogs.com/champ/p/execorder.html 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行 ...

  8. 【转】Unity3D中脚本的执行顺序和编译顺序

    支持原文,原文请戳: Unity3D中脚本的执行顺序和编译顺序 在Unity中可以同时创建很多脚本,并且可以分别绑定到不同的游戏对象上,它们各自都在自己的生命周期中运行.与脚本有关的也就是编译和执行啦 ...

  9. （转）MOMO的Unity3D研究院之深入理解Unity脚本的执行顺序（六十二）

    http://www.xuanyusong.com/archives/2378 Unity是不支持多线程的,也就是说我们必须要在主线程中操作它,可是Unity可以同时创建很多脚本,并且可以分别绑定在不 ...

随机推荐

  1. 循环神经网络中BFTT的公式推导

    一.变量定义 此文是我学习BFTT算法的笔记,参考了雷明<机器学习与应用>中的BFTT算法推导,将该本书若干个推导串联起来,下列所有公式都是结合书和资料,手动在PPT上码的,很费时间,但是 ...

  2. 2016级算法第四次上机-D.AlvinZH的1021实验plus

    978 AlvinZH的1021实验plus 思路 贪心,中等题. 使用miss变量表示未覆盖的最小数字,初始值为1. 初始覆盖区间为[1,miss),目标是覆盖[1,m],即miss需要大于m. 需 ...

  3. HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  4. 搭建gogs

    https://blog.csdn.net/hwm_life/article/details/82969005 服务器环境 CentOS 7 64位 安装Gogs所需的其它环境 需要安装的依赖有Ngi ...

  5. MySQL压缩版Windows环境进行安装配置

    MySQL下载地址:https://dev.mysql.com/downloads/mysql/ 选择对应的系统和相应的版本后点击Download进入下载页面,不需要登录,点击下面的“No thank ...

  6. python全栈开发_day8_文件的多种读写方式及游标

    一:文件的多种读写方式 主方式:w    r    a 从方式:t     b    + 了解方式:x    u 1)按t(按照字符进行操作): with open("data_1.txt& ...

  7. 扩展中国剩余定理 exCRT 学习笔记

    前言 由于 \(\{\mathrm{CRT}\}\subseteq\{\mathrm{exCRT}\}\),而且 CRT 又太抽象了,所以直接学 exCRT 了. 摘自 huyufeifei 博客 这 ...

  8. js对函数参数的封装

    对函数参数的封装 一个原始函数有n个参数,用wrap对函数进行封装,生成一个新的函数,当给它传入参数数量为n的时候,将执行原始函数,否则不执行 //函数封装 function wrap(func){ ...

  9. es put mapping

    fd dg public Map<String, Map<String, String>> javaBeanToMapping(Object instance, List< ...

  10. docker安装mongo初体验

    1.docker安装在此不做介绍,请自行百度:个人环境是在windows下运行cmd执行docker命令2.打算在docker下安装使用mongo,顺带熟悉docker,拉开篇章3.docker下安装 ...