一个简单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. Linux系统NAT模式下设置网络网关

    1.配置Vm网络编辑器 2.配置固定IP地址 命令:vi /etc/sysconfig/network-scripts/ifcfg-ens33 #下面内容直接复制进去,如果有重复的可以去除 TYPE= ...

  2. HDU-6125-Friend-Graph-2017CCPC网络赛（图论，拉姆齐定理-组合数学）

    Friend-Graph Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  3. Flowportal-BPM——环境配置

    环境配置: 一.控制面板→程序和功能→打开或不关闭Window功能→选择选项 二.控制面板→管理工具→Internet信息服务(IIS)管理器→左侧第一个→ISAPI和CGI限制→全部选为[允许] 三 ...

  4. eclipse如何设置UTF-8

    一.Eclipse设置utf-8编码包括两个方面,一方面可以设置workspace工作间编码,另一方面可以设置Android Project项目编码,设置步骤: 1)设置workspace工作间编码: ...

  5. 如何给oneindex网盘增加评论、密码查看、read me,头提示功能。

    来自我的博客:www.resource143.com 微信公众号:资源库resource 视频教程地址 点击查看 评论功能 特性 使用 GitHub 登录 支持多语言 [en, zh-CN, zh-T ...

  6. android studio ndk 开发入门

    ndk 开发没什么神秘的ndk 说白了就是一个交叉编译的工具链,用它来生成各个CPU架构下的静态或动态链接库,linux 下就是 .a 和 .so 文件.原理就是 java 通过 JNI 和 C.C+ ...

  7. eclipse添加dtd约束和xml约束的方法

    struts-2.3.dtd dtd 文件的位置 导入上面的 dtd 约束 spring-beans-4.2.xsd 为主配置文件引入新的命名空间(约束)

  8. git push.default 几种设置笔记

    1 simple ,本地和远程分支同名才会推送,只会推送当前的分支到远程 ,默认推送分支数量:1 2 matching , 会推送匹配的本地分之到远程分之,假如本地有的分支远程没有,不会把本地推送到远 ...

  9. js处理小数方法

    1.丢弃小数部分,保留整数部分 js:parseInt(7/2) 2.向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 3,四舍五入. js: Math.round(7/2) 4, ...

  10. hadoop nameNode 无法启动

    /************************************************************STARTUP_MSG: Starting NameNodeSTARTUP_M ...