小生愛

实例一. 基础知识

实例二. 控制播放次数

音频属性列表

        /**
            **  【Audio 属性】
            
            *   controls 是否显示默认音频面板

            *   preload 是否预加载音频 有autoplay时preload被忽略
                    auto - 当页面加载后载入整个音频
                    meta - 当页面加载后只载入元数据
                    none - 当页面加载后不载入音频

            *   source
                    src 播放的音频
                    media 规定媒体资源的类型,供浏览器决定是否下载
                    type 规定媒体资源的 MIME 类型 为了机器识别
                        mp3 audio/mpeg
                        ogg audio/ogg
                        wav audio/wav
            
            *   autoplay 自动播放 autoplay="autoplay"

            *   loop 循环播放loop="loop" *注[该属性一般不用 不好控制]

            *   muted[muted] 初始时静音

            *   canPlayType 是否能播放某种格式的资源 例如 : audio.canPlayType('audio/ogg')

            *   currentTime 控制播放位置 单位秒 例如: audio.currentTime = 5

            *   currentSrc 返回音频的URL
            
            *   load 重新加载Audio资源 例如: audio.load() 会从头重新加载
            
            *   duration 返回流媒体长度 *注[音频加载成功以后才能返回值]

            *   defaultPlaybackRate 默认播放速度 需要重载load 例如: defaultPlaybackRate = 0.5

            *   playbackRate 默认播放速度 不需要重载load 即时有效  例如:audio.playbackRate = 0.5

            *   networkState 获得音频的当前网络状态
                    0 - 音频/视频尚未初始化 
                    1 - 音频/视频是活动的且已选取资源,但并未使用网络
                    2 - 浏览器正在下载数据
                    3 - 未找到音频/视频来源

            *   buffered 获得音频缓冲范围 以秒为单位 *注[如果用户在音频/视频中跳跃,则会获得多个播放范围]
                    length - 获得音视频中已缓冲范围的数量
                    start(index) - 获得某个已缓冲范围的开始位置
                    end(index) - 获得某个已缓冲范围的结束位置

            *   played 获得音频播放范围 以秒为单位
                    length - 获得音频/视频中已播范围的数量
                    start(index) - 获得某个已播范围的开始位置
                    end(index) - 获得某个已播范围的结束位置

            *   seekable 获得首个以秒计的音频可寻址范围
                    length - 获得音频/视频中可寻址范围的数量
                    start(index) - 获得可寻址范围的开始位置
                    end(index) - 获得可寻址范围的结束位置
            
            *   ended 检测音频是否播放结束

            *   volume 音量大小 例如: volume = 0.5

            *   muted true静音 fasle打开声音 例如:muted=true
            
            *   seeking 用户是否正在音频中进行查找 true查找 false木有查找

            ** 【Audio 方法】

            *   创建Audio方法
                    1. document.createElement('audio');
                    2. new Audio();
            
            *   play 开始播放 audio.play();

            *   pause 暂停 audio.pause();
            
            *   paused  是否暂停 暂停为true 未暂停 false 例如: audio.paused

            ** 【audio 事件】

            *   ended 监听是否播放完

            *   canplaythrough 监听是否开始播放

            *   seeking 当用户开始移动/跳跃到音频中的新位置时

            *   volumechange 音量改变时

            *   seeked 当用户已移动/跳跃到音频中的新位置时 (用处不大)

            *   loadstart 浏览器开始寻找音频时触发该事件 (用处不大)

            *   durationchange 音频时长发生变化时触发该事件 (用处不大)

            *   canplay 监听开始播放时 跟canplaythrough区别是 canplay并不管是否可以连续播放
        */
/** ** 【Audio 属性】 * controls 是否显示默认音频面板 * preload 是否预加载音频 有autoplay时preload被忽略 auto - 当页面加载后载入整个音频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入音频 * source src 播放的音频 media 规定媒体资源的类型,供浏览器决定是否下载 type 规定媒体资源的 MIME 类型 为了机器识别 mp3 audio/mpeg ogg audio/ogg wav audio/wav * autoplay 自动播放 autoplay="autoplay" * loop 循环播放loop="loop" *注[该属性一般不用 不好控制] * muted[muted] 初始时静音 * canPlayType 是否能播放某种格式的资源 例如 : audio.canPlayType('audio/ogg') * currentTime 控制播放位置 单位秒 例如: audio.currentTime = 5 * currentSrc 返回音频的URL * load 重新加载Audio资源 例如: audio.load() 会从头重新加载 * duration 返回流媒体长度 * defaultPlaybackRate 默认播放速度 需要重载load 例如: defaultPlaybackRate = 0.5 * playbackRate 默认播放速度 不需要重载load 即时有效 例如:audio.playbackRate = 0.5 * networkState 获得音频的当前网络状态 0 - 音频/视频尚未初始化 1 - 音频/视频是活动的且已选取资源,但并未使用网络 2 - 浏览器正在下载数据 3 - 未找到音频/视频来源 * buffered 获得音频缓冲范围 以秒为单位 *注[如果用户在音频/视频中跳跃,则会获得多个播放范围] length - 获得音视频中已缓冲范围的数量 start(index) - 获得某个已缓冲范围的开始位置 end(index) - 获得某个已缓冲范围的结束位置 * played 获得音频播放范围 以秒为单位 length - 获得音频/视频中已播范围的数量 start(index) - 获得某个已播范围的开始位置 end(index) - 获得某个已播范围的结束位置 * seekable 获得首个以秒计的视频可寻址范围 length - 获得音频/视频中可寻址范围的数量 start(index) - 获得可寻址范围的开始位置 end(index) - 获得可寻址范围的结束位置 * ended 检测音频是否播放结束 * volume 音量大小 例如: volume = 0.5 * muted true静音 fasle打开声音 例如:muted=true * seeking 用户是否正在音频中进行查找 true查找 false木有查找 ** 【Audio 方法】 * 创建Audio方法 1. document.createElement('audio'); 2. new Audio(); * play 开始播放 audio.play(); * pause 暂停 audio.pause(); * paused 是否暂停 暂停为true 未暂停 false 例如: audio.paused ** 【audio 事件】 * ended 监听是否播放完 * canplaythrough 监听是否开始播放 * seeking 当用户开始移动/跳跃到音频中的新位置时 * volumechange 音量改变时 * seeked 当用户已移动/跳跃到音频中的新位置时 (用处不大) * loadstart 浏览器开始寻找音频时触发该事件 (用处不大) * durationchange 音频时长发生变化时触发该事件 (用处不大) */ // Audio 实例一_________________________________________________________________________ // 创建Audio的方式 // 方法一 // var audio = document.createElement('audio'); // 方法二 var audio = new Audio(); var arr = ['audio/wav', 'audio/mpeg', 'audio/ogg'] var m = ['audio/n1.wav', 'audio/n2.mp3', 'audio/n3.ogg']; // 显示默认面板 audio.controls = 'controls'; for(var i=0; i<3; i++){ // 创建source标签 var source = document.createElement('source'); source.src = m[i]; source.type = arr[i]; audio.appendChild(source); } // 播放 audio.play(); document.body.appendChild(audio); // Audio 实例二 简单的进度条_________________________________________________________________________ // HTML :
var audio = document.getElementsByTagName('audio')[0]; // 监听可以播放 audio.addEventListener('canplaythrough', function (){ // 音频长度 var audioLength = audio.duration; var end; var width = 200; var node = document.getElementById('j2'); (function (){ // 获取范围总数 开始范围数为0 var progressRate = audio.played.length; // 范围为0时 不执行 if(progressRate){ end = audio.played.end(0); var w = (end/length)*width - 200; node.style.marginLeft = w + 'px'; }; setTimeout(arguments.callee, 1000); })(); }, false);