HTML5中js控制播放音乐次数和间隔以及google高版本浏览器无法自动播放音视频问题
HTML5中js控制播放音乐次数和间隔
html
JS
//播放按钮标签,循环次数播放,间隔时间
function hwhAudioPlay(elem,max,times){
elem.play();
var start = 0;
elem.addEventListener("ended",function() {
start++;
if (start当然你还可以改歌曲实现歌单循环播放哦
转载地址：http://www.wuheng.net/blog_92.html
测试浏览器： Google Chrome 67.0.3396.99
注意audio标签里的属性
HTML5
简单实例：
Api说明：
1.如果需要显示缓存进度，可以参考：HTML5 Media事件
2.不能控制音频的二进制数据，如果需要处理二进制音频数据，参考HTML5 WebAudioAPI简介(一)
只读属性
duration ---获取媒体文件的播放时长，以s为单位，如果无法获取则为NaN，当触发canplay事件后就可以获取当前总长度
startTime---返回起始播放时间，一般是0.0,除非是缓冲过的媒体文件，并一部分内容已经不再缓冲区(此属性好像已经不可用)
paused-----判断是否已经暂停，返回true/false
ended-----判断是否已经播放完毕，返回true/false
error----在发生了错误后，返回错误代码
currentSrc --以字符串的形式发挥正在播放或已经加载的文件，对应浏览器在source元素中选择的文件
buffered---获取当前缓冲区大小，返回TimeRanges对象，点击更多参考
可控制属性
src----指定音频的文件位置
autoplay---是否自动播放
preload----是否预加载
loop------是否循环播放
controls----显示或隐藏用户控制界面
autobuffer---媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性(此属性好像已经不可用)
muted------设置是否静音
volume ----在0.0到1.0间的音量值，或查询当前音量值
currentTime--以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
方法
load() ---加载音频、视频软件
paly() ---播放
pause()---暂停
canPlayType(obj) ----测试饭后指定指定的Mime类型的文件
事件
loadstart ---客户端开始请求数据
progress----正在播放的时候不停触发，如果暂停不会触发，触发的时间间隔比较大
play------play()和autopaly播放时，类似事件onplaying
pause-----pause()方法触发时
ended-----当结束播放时
timeupdate----当前播放时间发生改变的时候，播放中常用的时间处理，如果暂停不会触发，触发的时间间隔比较小
canplaythrough---歌曲已经载入完成
canplay -----缓冲至可播放状态，类似事件onloadedmetadata
onloadedmetadata----当元数据（比如分辨率和时长）被加载时运行的脚本更多属性
audioTracks----返回表示可用音频滚到的AudioTrackList对象。
controller---返回表示音频大年媒体控制器的MediaController对象。
crossOrigin---设置或返回音频的CORS设置
defaultMuted---设置或返回音频默认是否静音
defaultPlaybackRate---设置或返回音频的默认播放速度
mediaGroup---设置或返回音频叔叔的美肌组合的名称
networkState---返回音频的当前网络状态
playbackRate---设置或返回音频的播放速度。
seekable---返回标识音频可寻址不烦的TimeRanges对象
seeking---返回用户当前收正在音频中进行查找。
textTracks---返回标识文本滚到的TextTrackList对象更多方法
load()----重新加载音频元素
getStartDate()----返回新的Date对象，表示当前时间线偏移量。
fastSeek()---在音频播放器中指定播放时间。
addTextTrack()----想音频添加新的文本轨道。更多参考：http://caibaojian.com/html5-audio.html
实例1：
../content/audio/海阔天空.mp3
js代码：
var currentFile = '../content/audio/海阔天空.mp3';
//判断浏览器是否支持audio
if (!window.HTMLAudioElement) {
alert('您的浏览器不支持audio标签');
} else {
var myAudio = document.getElementById('myAudio');
//播放/暂停按钮
$('#playBtn').click(function () {
var icon = $(this).find('i');
//播放
if (myAudio.paused) {
//如果延迟指定src的话，会在播放前有较长的等待
if (myAudio.src.length <= 0) {
myAudio.src = currentFile;
}
myAudio.play();
icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
} else {
myAudio.pause();
icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
}
});
//静音按钮
$('#mutedBtn').click(function () {
var icon = $(this).find('i');
icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');
myAudio.muted = !myAudio.muted;
});
//音量按钮
$('#volume').slider({
value: myAudio.volume * 100
}).on('change', function (e) {
var value = e.value.newValue / 100;
myAudio.volume = value;
});
$('#changeBtn').click(function () {
//使用在线文件
myAudio.src = 'http://m5.file.xiami.com/523/78523/1136455538/1774490672_16884267_l.mp3?auth_key=61ade10d6a7508618ab53fe2aaa39b8c-1478919600-0-null';
myAudio.play();
});
//监听事件
myAudio.oncanplay = function () {
console.info('进入可播放状态,音频总长度:' + myAudio.duration);
}
myAudio.onplay = function () {
console.info('开始播放：' + myAudio.currentTime);
}
myAudio.onpause = function () {
console.info('暂停播放：' + myAudio.currentTime);
}
myAudio.onprogress = function () {
//console.info(myAudio.buffered);
//console.info('正在播放：' + myAudio.currentTime);
}
myAudio.ontimeupdate = function (e) {
console.info('播放时间发生改变：'+myAudio.currentTime);
}
}显示结果：
整理资料（可点击查看）：
HTML5
HTML5 标签Api整理（二）
google高版本浏览器无法自动播放音视频问题
[bug]解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例，桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在 2018 年 4 月份发布的 Chrome 66 也正式关掉了声音自动播放，也就是说
那么怎么解决呢？解决方式如下：
在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”，修改为 “No user gesture is required” 就可以了
链接：https://www.jianshu.com/p/57da5fe6494c
详情请看这篇文章：Chrome 66 禁止声音自动播放，开发怎么应对？