[](https://pic.salongweb.com/2016/03/html5-audio-player.jpg "Wordpress自定义域与HTML5简洁的音乐播放器")[Sixianqiu主题](https://sixianqiu.com)，一个简洁、多形式（标准、图像、相册、音乐、视频、引用与链接），专门为四弦秋发表诗集的Wordpress博客主题。对于音乐和视频本来是打算用网易云音乐和优酷视频，而萨龙龙的所有站点都使用https来访问，网易云音乐与优酷视频并不支持https访问，所以就使用本地HTML5音乐与视频播放器。
本文就来介绍下如何打造一款Wordpress简洁HTML5音乐播放器，并通过自定义域来获取音乐的地址。
### HTML5代码
添加到需要显示HTML5音乐播放器的地方
1. <?php if(get\_post\_meta($post->ID, “audio”, true)) { ?>
2. <section class=“player”>
3. <audio preload=“auto” controls>
4. <source src=“<?php $values = get\_post\_custom\_values(“audio“); echo $values\[0\]; ?>”>
5. </audio>
6. </section>
7. <?php } ?>
代码中判断了是否有自定义域audio这个值，如果没有就不输出整段代码。
### JS代码
添加到主题的JS文件中
1. // HTML5播放器
2. $(function() {
3. $(‘audio’).audioPlayer();
4. });
5.
6. (function(e, t, n, r) {
7. var i = “ontouchstart” in t,
8. s = i ? “touchstart” : “mousedown”,
9. o = i ? “touchmove” : “mousemove”,
10. u = i ? “touchend” : “mouseup”,
11. a = i ? “touchcancel” : “mouseup”,
12. f = function(e) {
13. var t = Math.floor(e / 3600),
14. n = Math.floor(e % 3600 / 60),
15. r = Math.ceil(e % 3600 % 60);
16. return (t == 0 ? “” : t > 0 && t.toString().length < 2 ? “0” + t + “:” : t + “:”) + (n.toString().length < 2 ? “0” + n : n) + “:” + (r.toString().length < 2 ? “0” + r : r)
17. },
18. l = function(e) {
19. var t = n.createElement(“audio”);
20. return !!(t.canPlayType && t.canPlayType(“audio/” + e.split(“.”).pop().toLowerCase() + “;”).replace(/no/, “”))
21. };
22. e.fn.audioPlayer = function(t) {
23. var t = e.extend({
24. classPrefix: “audioplayer”,
25. strPlay: “播放”,
26. strPause: “暂停”,
27. strVolume: “音量”
28. }, t),
29. n = {},
30. r = {
31. playPause: “playpause”,
32. playing: “playing”,
33. time: “time”,
34. timeCurrent: “time-current”,
35. timeDuration: “time-duration”,
36. bar: “bar”,
37. barLoaded: “bar-loaded”,
38. barPlayed: “bar-played”,
39. volume: “volume”,
40. volumeButton: “volume-button”,
41. noVolume: “novolume”,
42. mute: “mute”,
43. mini: “mini”
44. };
45. for (var u in r) n\[u\] = t.classPrefix + “-“ + r\[u\];
46. this.each(function() {
47. if (e(this).prop(“tagName”).toLowerCase() != “audio”) return false;
48. var r = e(this),
49. u = r.attr(“src”),
50. c = r.get(0).getAttribute(“autoplay”),
51. c = c === “” || c === “autoplay” ? true : false,
52. h = r.get(0).getAttribute(“loop”),
53. h = h === “” || h === “loop” ? true : false,
54. p = false;
55. if (typeof u === “undefined”) {
56. r.find(“source”).each(function() {
57. u = e(this).attr(“src”);
58. if (typeof u !== “undefined” && l(u)) {
59. p = true;
60. return false
61. }
62. })
63. } else if (l(u)) p = true;
64. var d = e(‘<div class=“‘ + t.classPrefix + ‘”>’ + (p ? e(“<div>”).append(r.eq(0).clone()).html() : ‘<embed src=“‘ + u + ‘” width=“0” height=“0” volume=“100” autostart=“‘ + c.toString() + ‘” loop=“‘ + h.toString() + ‘” />’) + ‘<div class=“‘ + n.playPause + ‘” title=“‘ + t.strPlay + ‘”><a href=“#”>’ + t.strPlay + “</a></div></div>”),
65. v = p ? d.find(“audio”) : d.find(“embed”),
66. v = v.get(0);
67. if (p) {
68. d.find(“audio”).css({
69. width: 0,
70. height: 0,
71. visibility: “hidden”
72. });
73. d.append(‘<div class=“‘ + n.time + “ ” + n.timeCurrent + ‘”></div><div class=“‘ + n.bar + ‘”><div class=“‘ + n.barLoaded + ‘”></div><div class=“‘ + n.barPlayed + ‘”></div></div><div class=“‘ + n.time + “ ” + n.timeDuration + ‘”></div><div class=“‘ + n.volume + ‘”><div class=“‘ + n.volumeButton + ‘” title=“‘ + t.strVolume + ‘”><a href=“#”>’ + t.strVolume + ‘</a></div></div>’);
74. var m = d.find(“.” + n.bar),
75. g = d.find(“.” + n.barPlayed),
76. y = d.find(“.” + n.barLoaded),
77. b = d.find(“.” + n.timeCurrent),
78. w = d.find(“.” + n.timeDuration),
79. E = d.find(“.” + n.volumeButton),
80. S = d.find(“.” + n.volumeAdjust + ” > div”),
81. x = 0,
82. T = function(e) {
83. theRealEvent = i ? e.originalEvent.touches\[0\] : e;
84. v.currentTime = Math.round(v.duration \* (theRealEvent.pageX – m.offset().left) / m.width())
85. },
86. N = function(e) {
87. theRealEvent = i ? e.originalEvent.touches\[0\] : e;
88. v.volume = Math.abs((theRealEvent.pageY – (S.offset().top + S.height())) / S.height())
89. },
90. C = setInterval(function() {
91. y.width(v.buffered.end(0) / v.duration \* 100 + “%”);
92. if (v.buffered.end(0) >= v.duration) clearInterval(C)
93. }, 100);
94. var k = v.volume,
95. L = v.volume = .111;
96. if (Math.round(v.volume \* 1e3) / 1e3 == L) v.volume = k;
97. else d.addClass(n.noVolume);
98. w.html(“…”);
99. b.text(f(0));
100. v.addEventListener(“loadeddata”, function() {
101. w.text(f(v.duration));
102. S.find(“div”).height(v.volume \* 100 + “%”);
103. x = v.volume
104. });
105. v.addEventListener(“timeupdate”, function() {
106. b.text(f(v.currentTime));
107. g.width(v.currentTime / v.duration \* 100 + “%”)
108. });
109. v.addEventListener(“volumechange”, function() {
110. S.find(“div”).height(v.volume \* 100 + “%”);
111. if (v.volume > 0 && d.hasClass(n.mute)) d.removeClass(n.mute);
112. if (v.volume <= 0 && !d.hasClass(n.mute)) d.addClass(n.mute)
113. });
114. v.addEventListener(“ended”, function() {
115. d.removeClass(n.playing)
116. });
117. m.on(s, function(e) {
118. T(e);
119. m.on(o, function(e) {
120. T(e)
121. })
122. }).on(a, function() {
123. m.unbind(o)
124. });
125. E.on(“click”, function() {
126. if (d.hasClass(n.mute)) {
127. d.removeClass(n.mute);
128. v.volume = x
129. } else {
130. d.addClass(n.mute);
131. x = v.volume;
132. v.volume = 0
133. }
134. return false
135. });
136. S.on(s, function(e) {
137. N(e);
138. S.on(o, function(e) {
139. N(e)
140. })
141. }).on(a, function() {
142. S.unbind(o)
143. })
144. } else d.addClass(n.mini);
145. if (c) d.addClass(n.playing);
146. d.find(“.” + n.playPause).on(“click”, function() {
147. if (d.hasClass(n.playing)) {
148. e(this).attr(“title”, t.strPlay).find(“a”).html(t.strPlay);
149. d.removeClass(n.playing);
150. p ? v.pause() : v.Stop()
151. } else {
152. e(this).attr(“title”, t.strPause).find(“a”).html(t.strPause);
153. d.addClass(n.playing);
154. p ? v.play() : v.Play()
155. }
156. return false
157. });
158. r.replaceWith(d)
159. });
160. return this
161. }
162. })(jQuery, window, document)
### CSS代码
添加到主题文件的CSS文件中
1. /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*HTML5音乐播放器\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
2. .player{
3. background-color: \#fff;
4. border-top: 1px \#eee solid;
5. border-right: 1px \#eee solid;
6. border-left: 1px \#eee solid;
7. padding: 20px;
8. }
9. .player h3{
10. margin: 12px 0 0 8px;
11. }
12. /\*播放按钮\*/
13. .audioplayer {
14. height: 54px;
15. width: 100%;
16. position: relative;
17. z-index: 1;
18. background-color: \#f8f8f8;
19. }
20.
21. .audioplayer > div {
22. position: absolute;
23. }
24.
25. .audioplayer-playpause {
26. width: 32px;
27. height: 32px;
28. border-radius: 100%;
29. background-color: \#447110;
30. text-indent: –9999px;
31. cursor: pointer;
32. z-index: 2;
33. top: 10px;
34. left: 20px;
35. }
36.
37. .audioplayer-playpause:hover,
38. .audioplayer-playpause:focus {
39. background-color: \#024e48;
40. }
41.
42. .audioplayer-playpause a {
43. display: block;
44. -webkit-transition: none;
45. -moz-transition: none;
46. -ms-transition: none;
47. -o-transition: none;
48. transition: none;
49. }
50.
51. .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
52. width: 0;
53. height: 0;
54. border: 6px solid transparent;
55. border-right: none;
56. border-left–color: \#fff;
57. content: ”;
58. position: absolute;
59. top: 50%;
60. left: 50%;
61. margin: –6px 0 0 –2px;
62. /\* 8 4 \*/
63. ;
64. }
65.
66. .audioplayer-playing .audioplayer-playpause a {
67. width: 9px;
68. height: 9px;
69. position: absolute;
70. top: 50%;
71. left: 50%;
72. margin: –4px 0 0 –4px;
73. /\* 6 \*/
74. ;
75. }
76.
77. .audioplayer-playing .audioplayer-playpause a:before,
78. .audioplayer-playing .audioplayer-playpause a:after {
79. width: 40%;
80. height: 100%;
81. background-color: \#fff;
82. content: ”;
83. position: absolute;
84. top: 0;
85. }
86.
87. .audioplayer-playing .audioplayer-playpause a:before {
88. left: 0;
89. }
90.
91. .audioplayer-playing .audioplayer-playpause a:after {
92. rightright: 0;
93. }
94.
95. /\*时间\*/
96. .audioplayer-time {
97. width: 46px;
98. height: 100%;
99. line-height: 54px;
100. text-align: center;
101. z-index: 2;
102. top: 0;
103. }
104.
105. .audioplayer-time-current {
106. left: 68px;
107. }
108.
109. .audioplayer-time-duration {
110. rightright: 32px;
111. }
112.
113. .audioplayer-novolume .audioplayer-time-duration {
114. border-right: 0;
115. rightright: 0;
116. }
117.
118. /\*播放条\*/
119. .audioplayer-bar {
120. height: 8px;
121. /\* 14 \*/
122. background-color: \#e4e4e4;
123. cursor: pointer;
124. z-index: 1;
125. top: 50%;
126. rightright: 6.875em;
127. /\* 110 \*/
128. left: 120px;
129. /\* 110 \*/
130. margin-top: –4px;
131. /\* 7 \*/
132. ;
133. }
134.
135. .audioplayer-novolume .audioplayer-bar {
136. rightright: 4.375em;
137. }
138.
139. .audioplayer-bar div {
140. width: 0;
141. height: 100%;
142. position: absolute;
143. left: 0;
144. top: 0;
145. }
146.
147. .audioplayer-bar-loaded {
148. background-color: \#e4e4e4;
149. z-index: 1;
150. }
151.
152. .audioplayer-bar-played {
153. background: \#447110;
154. z-index: 2;
155. }
156. /\*音量\*/
157. .audioplayer-volume {
158. width: 36px;
159. height: 100%;
160. text-align: left;
161. text-indent: –9999px;
162. cursor: pointer;
163. z-index: 2;
164. top: 0;
165. rightright: 0;
166. }
167.
168. .audioplayer-volume:hover,
169. .audioplayer-volume:focus {
170. background-color: \#f8f8f8;
171. }
172.
173. .audioplayer-volume-button {
174. width: 100%;
175. height: 100%;
176. }
177.
178. .audioplayer-volume-button a {
179. width: 0.313em;
180. /\* 5 \*/
181. height: 0.375em;
182. /\* 6 \*/
183. background-color: \#447110;
184. display: block;
185. position: relative;
186. z-index: 1;
187. top: 50%;
188. left: 35%;
189. margin-top: –2px;
190. }
191.
192. .audioplayer-volume-button a:before,
193. .audioplayer-volume-button a:after {
194. content: ”;
195. position: absolute;
196. }
197.
198. .audioplayer-volume-button a:before {
199. width: 0;
200. height: 0;
201. border: 0.5em solid transparent;
202. /\* 8 \*/
203. border-left: none;
204. border-right–color: \#447110;
205. z-index: 2;
206. top: 50%;
207. rightright: -0.25em;
208. margin-top: -0.5em;
209. /\* 8 \*/
210. ;
211. }
212.
213. .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
214. /\* “volume” icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons \*/
215. width: 0.313em;
216. /\* 5 \*/
217. height: 0.313em;
218. /\* 5 \*/
219. border: 0.25em double \#447110;
220. /\* 4 \*/
221. border-width: 0.25em 0.25em 0 0;
222. /\* 4 \*/
223. left: 0.563em;
224. /\* 9 \*/
225. top: -0.063em;
226. /\* 1 \*/
227. -webkit-border-radius: 0 0.938em 0 0;
228. /\* 15 \*/
229. -moz-border-radius: 0 0.938em 0 0;
230. /\* 15 \*/
231. border-radius: 0 0.938em 0 0;
232. /\* 15 \*/
233. -webkit-transform: rotate( 45deg);
234. -moz-transform: rotate( 45deg);
235. -ms-transform: rotate( 45deg);
236. -o-transform: rotate( 45deg);
237. transform: rotate( 45deg);
238. }
239.
240. /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*HTML5音乐播放器end\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
\[successbox\]一个简洁的HTML5音乐播放器就设计好了，很方便的集成到Wordpress主题中，你也可以修改其中的代码来匹配自己主题的样式，更详细的说明可以下方第一个按钮。\[/successbox\]\[scbutton link=”http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/” target=”blank” variation=”blue”\]原文地址（黑色的音乐播放器）\[/scbutton\]\[scbutton link=”https://sixianqiu.com” target=”blank” variation=”green”\]四弦秋的诗演示（简洁的音乐播放器）\[/scbutton\]