html5-audio 播放列表和自动播放

一个简单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>
时间: 2024-08-03 18:03:40

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

HTML5 audio 微信中自动播放音乐

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> <title>微信中自动播放音乐</ti

audio标签的自动播放(ios)

0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.controls属性 有了它,就会显示控制条. 图1 chrome默认audio样式 图2 ie默认audio样式 图3 firefox默认audio样式 图4  ios的微信端(iphone6,系统版本11.4,微信使用内置Safari): 2.autoplay属性 autoplay指的是自动播放,

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

CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Settings\guo\Local Settings\Application Data\Google\Chrome\Application\24.0.1312.57的下面有一个文件ffmpegsumo.dll. 复制出来,替换掉CEF3的同名文件.就好了.

HTML5 audio标签自制音乐播放器

相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码) 实现的功能 播放暂停(点击切换播放状态) 下一曲(切换下一首) 随机播放(当前歌曲播放完自动播放下一曲) 单曲循环(点击随机播放图标可切换成单曲循环) 音量调节(鼠标移入滑动设置音量大小) 歌曲进度条(可点击切换进度直接跳,也可以点击小

html5 audio js控制暂停播放停止

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title> </head> <body>  音乐<audio src=&quo

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

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> 音乐 <audio src

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

HTML5 audio 如何实现播放多个MP3音频

<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 autoplay autoplay 添加该属性后,音频会自动播放 controls controls 设置后,显示控件,如播放按钮.音量 loop loop 添加该属性后,当音频播放结束后会重新开始播放 preload preload 音频显示页面加载,准备播放,如已添加autoplay,则忽略该属性 src u

微信内自动播放audio

http://rawgit.com/ufologist/7c14837db642a6e916ce/raw/9be2c7663f7a99708e88a59f71e6b2cc86bd8ec8/autoplay-audio-ios.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&q