一个简单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. 半年的iOS代码生活

    半年的iOS代码生活 在高考大军中拼杀过,也在大学校园中荒芜过,曾经低迷消沉,也常满怀壮志…… 但是最多的还是被称为小伙子以及自称为iOS工程师!博主就是这种喜闻乐见的这类人,实习一年后在2015年的 ...

  2. 安卓monkey自动化测试，软硬回车

    1.Monkey程序介绍 在android手机上做自动化测试,monkey比cts,Android UnitTest 好用多了,他其实是继承与adb shell中的一段的shell指令. monkey ...

  3. 将python的代码文件打包成可执行文件

    1.使用pip install Pyinstaller  命令安装 2.使用命令 pyinstaller -F  *.py打包成exe 3.在\dist文件夹下找到exe; 一.pyinstaller ...

  4. SQL语句02（连表查询）

    ---恢复内容开始--- sql1992sql分类    1.笛卡尔积 (表乘表) 例:select * from emp,dept;    2.等值连接 表的连接条件使用“=” 例:select * ...

  5. HDU – 1050 Moving Tables

    http://acm.hdu.edu.cn/showproblem.php?pid=1050 当时这道题被放在了贪心专题,我又刚刚做了今年暑假不AC所以一开始就在想这肯定是个变过型的复杂贪心,但是后来 ...

  6. 一款开源免费的办公套件系统：DzzOffice详细部署

    一.系统环境 个人建议centos 7 系统 cat /etc/redhat-release CentOS Linux release (Core) 基本更新 yum update -y 基本优化 关 ...

  7. 【JSP】jsp报错：Syntax error, insert "}" to complete MethodBody

    使用MyEclipse编写JSP的时候有时会报错误如下 Syntax error, insert "}" to complete MethodBody 大体意思就是说方法体缺少缺少 ...

  8. SpringSecurity自定义用户登录

    根据上一节的配置,默认在服务开启的时候会被要求自动的进行表单登陆.用到的用户名只能是一个固定的用户名user,它的密码是每次启动的时候服务器自动生成的.最常见的场景是我们的用户是从数据库中获取的. 1 ...

  9. JavaScript设计模式-8.链式调用

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

  10. java中，方法可以访问他的类对象的任何私有特性

    java中,方法可以访问他的类对象的任何私有特性 读一本书(Core Java for the Impatient)时,发现这个注意,以前的时候没有在意,今天仔细想想发现记忆不深刻.记录一下 下面代码 ...