一个简单audio的列表和播放小例子

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

<script type="text/javascript">

var count = 43; //一共多少MP3文件

var index = '18.mp3'; // 初始化播放那个文件

window.onload = function(){

    var audio = new Audio();

    audio.preload = true;

    audio.controls = true;

    audio.loop = false;

    audio.src = index;

    document.body.appendChild(audio);

    audio.play();

    audio.addEventListener('ended', playEndedHandler, false);

    function playEndedHandler(){

        var name = parseInt(index);

        name = name+1 < 10 ? '0'+(name+1)+'.mp3' : (name+1)+'.mp3';

        console.log(name)

        name>count && audio.removeEventListener('ended',playEndedHandler,false);

        audio.src = name;

        audio.play();

    }

    var div = document.createElement('div');

    var ul = document.createElement('ul');

    for (var i = 1; i <=count; i++) {

        var name = i<10 ? '0'+i+'.mp3' : i+'.mp3'

        var li = document.createElement('li');

        var text = document.createTextNode(name);

        li.appendChild(text);

        ul.appendChild(li);

        li.addEventListener('click',function(event){

            audio.src=event.target.innerHTML;

            audio.play();

        },false)

    }

    div.appendChild(ul);

    document.body.appendChild(div);

}

</script>

</body>

</html>

html5-audio 播放列表和自动播放的更多相关文章

  1. audio标签的自动播放(ios)

    0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...

  2. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  3. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  4. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  5. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...

  6. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  7. 原生js设置audio在谷歌浏览器自动播放

    https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...

  8. js控制html5 audio的暂停、播放、停止

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  9. html5的video标签自动播放

    概念澄清 这里的"自动播放",是指用户的视觉效果,并不一定是元素自身的自动播放. 查看相关文档后,有以下两种最简方案. 配置属性 发现有video标签有一个自动播放的属性autop ...

随机推荐

  1. G - Game HDU - 5242 （数链剖分）

    题目链接: G - Game HDU - 5242 题目大意:首先是T组测试样例,给出一颗以1节点为根的树,每个节点有各自的价值,有m次从根节点出发向下走到叶子节点的机会,每次会得到所有经过节点的权值 ...

  2. jsp页面用struts2标签展示List<Object>类型的数据

    今天遇到一个问题,一个List<Object>类型的数据,是直接从sql查出来的数据,要在前端展示,原来的方法不知道为什么不能展示,后来找了好久,找到了一个靠谱的方法,记录一下 <s ...

  3. E - Guess the Root 拉格朗日差值法+交互

    题目传送门 题意:告诉你存在一个未知项系数最高为10的$f(x)$,你最多可以有50次询问,每次询问给出一个$x'$,系统会返回你$f(x')$的值,你需要猜一个$x''$,使得$f(x'')=0$, ...

  4. FreeRTOS-07内核控制函数

    根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 内核控制函数:

  5. Android动画及滑动事件冲突解决（转载）

    原文链接:http://blog.csdn.net/singwhatiwanna/article/details/38168103 Android开发中动画和事件处理是程序员迈向高手的必经之路,也是重 ...

  6. winform MD5加密

    byte[] result = Encoding.Default.GetBytes(this.tbPass.Text.Trim());    //tbPass为输入密码的文本框MD5 md5 = ne ...

  7. Linux 服务器开发常用命令操作

    1)查看网络端口 netstat -na --ip 2)查看特定应用程序进程 ps -ef | grep vsftp  or ps aux | grep xxx.exe 3)查看系统日志 vi /et ...

  8. 【es6】js原生的promise

    JavaScript 是单线程的,这意味着任何两句代码都不能同时运行,它们得一个接一个来.在浏览器中,JavaScript 和其他任务共享一个线程,不同的浏览器略有差异,但大体上这些和 JavaScr ...

  9. 个人常用的vba代码

    只做备注 Sub general_sql_macro() Sql = "" column_name = "user_count" Sql = "ins ...

  10. JavaScript设计模式-12.门面模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...