1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| var Iflat = Iflat || {};
/**
* Iflat.Audio用于在指定的标签内创建一个音频播放器，播放mp3；
* 页面加载或修改完成后，调用Iflat.Audio.init()，装载音频播放器；
* 插件为原生Javascript，不依赖jQuery
* @param selector 标签选择器，默认'.iflat-audio'，
* 支持 id(#id), className(.className), tagName(tagName)选择，不支持div[name=abc]这种复杂指定，
* 建议在div或span中加载此插件，否则在ie6-8中无法正常使用；
* 在页面增加selector指向的标签后，需调用Iflat.Audio.init()重新部署，最好是直接针对增加的标签部署，否则插件会检索全页面，效率较低；
* @param attr 从指定标签的哪个属性获取音频文件路径，默认'scr'，修改mp3路径后，无需重新部署，监听器会自动关联路径信息
*/
Iflat.Audio = {
className: '.iflat-audio',
attrName: 'src',
init: function (selector, attr) {
// 如果是ie浏览器，扩展其String原型方法，使其标！准！化！
var browser = Iflat.Browser.ieBullshitting();
// 根据选择器查询到所有满足条件的标签
var sel = selector || this.className;
var eles = [];
if (sel.startsWith("#")) {
var id = sel.substring(1, sel.length);
eles[0] = document.getElementById(id);
} else if (sel.startsWith(".")) {
var clsName = sel.substring(1, sel.length);
var all = document.getElementsByTagName("*");
for (var o = 0; o < all.length; o++) {
var eleCls = all[o].className
if (eleCls.indexOf(' ' + clsName) >= 0
|| eleCls.indexOf(clsName + ' ') >= 0
|| eleCls === clsName) {
eles[eles.length] = all[o];
}
}
} else {
eles = document.getElementsByTagName(sel);
}
var attr = attr || this.attrName
if (eles && eles.length > 0) {
for (var i = 0; i < eles.length; i++) {
// 获取标签的src属性，即mp3资源
var src = eles[i].getAttribute(attr);
// 将播放所需html代码置入标签内部
var cmpHtml = '';
if (browser.name === 'ie' && browser.version < 9) {
cmpHtml = '<audio src="' + src + '" controls></audio>';
} else {
cmpHtml = '<a href="javascript:void(0);" onclick="Iflat.Audio.clickPlayButton(this)"><i style="color:#1f6cf8" class="fa fa-play-circle fa-lg"></i></a><audio src="' + src + '" onended="Iflat.Audio.end(this)"></audio>';
}
eles[i].innerHTML = cmpHtml;
// 定义监听器的callback函数，使容器内的audio的src保持同步
var bindSrc = function (e) {
var audio = Iflat.DOM.lastChild(e);
if (!audio.paused) {
audio.pause();
}
var icon = Iflat.DOM.firstChild(Iflat.DOM.previousSibling(audio));
icon.className = "fa fa-play-circle fa-lg";
audio.setAttribute('src', e.getAttribute(attr))
}
// 增加监听器
Iflat.DOM.addAttributeListener(eles[i], attr, bindSrc);
}
}
},
clickPlayButton: function (ele) {
var media = Iflat.DOM.nextSibling(ele);
if (!media) {
console.error("未找到可播放的音频。");
return;
}
var icon = Iflat.DOM.firstChild(ele);
if (media.paused) {
media.play();
icon.className = "fa fa-pause-circle fa-lg";
} else {
media.pause();
icon.className = "fa fa-play-circle fa-lg";
}
},
end: function (ele) {
var icon = Iflat.DOM.firstChild(Iflat.DOM.previousSibling(ele));
icon.className = "fa fa-play-circle fa-lg";
},
play: function (audio) {
if (audio.paused) {
audio.play();
}
},
pause: function (audio) {
if (!audio.paused) {
audio.pause();
}
},
};
|