一个简单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. Windows Server2008如何打开添加IIS服务器

    https://jingyan.baidu.com/article/1612d500aa4594e20e1eeefc.html

  2. TeamView 连接2、3事

    问题1: 客户通过本地远程上服务器开TeamView让我们连,我们连上后发现开户一把她的远程关掉就卡住了. 如图,原来TeamView会启动多用户增强支持. 原来用的是用户ID连的,用户断掉远程后就不 ...

  3. Python【每日一问】16

    问: [基础题]TCP/UDP/HTTP协议区别 [提高题]在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数, ...

  4. Mac系统升级至OS X Mavericks后Genymotion出现的问题及解决方法

    Apple的系统升级终于免费了,可开心满满地升级到OS X Mavericks后,Android模拟器之王Genymotion罢工了.遇到两个问题:1. Unable to load VirtualB ...

  5. 【文档】二、Binlog结构和内容概述

    binlog是一系列文件,这些文件包含了Mysql服务实例中数据的变化. binlog包含一系列二进制日志文件,还包含一个索引文件. 每个日志文件包含了一个4字节的魔法数,后面跟着描述数据变化的事件内 ...

  6. str_split 分隔中文出现乱码 替代函数

    function mbstringtoarray($str,$charset) { $strlen=mb_strlen($str); while($strlen){ $array[]=mb_subst ...

  7. 个人常用的vba代码

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

  8. HDU 2193 AVL Tree

    AVL Tree An AVL tree is a kind of balanced binary search tree. Named after their inventors, Adelson- ...

  9. [Mysql 查询语句]——查询指定记录

    #比较 等于; 大于; 小于; 小于或等于; 大于或等于; 不等于; 排除掉; #指定范围查询 BETWEEN IN ; ; #指定集合查询 IN ,); ,); 集合元素可以是字符串类型 selec ...

  10. JAVA练手--String

    package tet; public class kk { public static void main(String[] args) { //1. { String Stra = "1 ...