一个简单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. java中mongo的条件查询

    @Override public Page<ProductInfo> findAll(Pageable pageable, ProductInfo productInfo) { //创建一 ...

  2. Camera Sensor

    camera sensor分为YUV sensor和Bayer sensor. YUV Sensor YUV Sensor输出的格式是YUV,图像的处理效果使用sensor内部的ISP,BB端接收到的 ...

  3. 【Three.js】如何选中外部模型

    1.问题 three.js中模型选中使用的是射线法,根据摄像机角度,鼠标点击位置和模型选中的distance参数判断来选中模型.对于原生的矢量模型完全没有问题,但是当遇到导入的外部模型,如obj.st ...

  4. 查看APK包签名的方法。

    1.查看 keystore $ keytool -list -keystore debug.keystore 结果: Keystore type: JKS Keystore provider: SUN ...

  5. Mac 10.12安装PDF浏览工具Foxit Reader

    说明:永久没费的跨平台PDF浏览工具. 下载: (链接: https://pan.baidu.com/s/1pLEAoXH密码: is5j)

  6. spring boot快速入门 7: 使用aop处理请求

    样例:登陆拦截(aop简单样例) 第一步:在pom 文件中加入aop依赖 <!-- spring aop --> <dependency> <groupId>org ...

  7. python-无名管道进程通信

    #!/usr/bin/python #coding=utf-8 import sys,os from time import sleep (r,w)=os.pipe() #创建无名管道,返回两个整数, ...

  8. 多线程编程(一)-Semaphore(信号量)的使用

    Semaphore的介绍 单词Semaphore的中文含义就是信号.信号系统的意思,此类的主要作用就是限制线程并发的数量. 举个例子,一个屋子里有10个人,但只有一个窄门可以出去,这个窄门一次最多只能 ...

  9. <数据挖掘导论>读书笔记10聚类分析续

    基于原型的聚类 模糊c均值使用模糊逻辑和模糊集合论的概念,提出一种聚类方案,它很像K均值,但是不需要硬性地将对象分派到一个簇中.模糊c均值算法有时也称为FCM 混合模型聚类采取这样的访谈,簇集合可以用 ...

  10. 和为S的两个数字★★

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 解题 ...