当前位置：首页-WordPress文章-HTML5/CSS3-正文

Wordpress自定义域与HTML5简洁的音乐播放器

萨龙龙 萨龙龙 HTML5/CSS38年前001.25W

Wordpress自定义域与HTML5简洁的音乐播放器 - 第1张Sixianqiu主题，一个简洁、多形式（标准、图像、相册、音乐、视频、引用与链接），专门为四弦秋发表诗集的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. });
  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. }
  21. .audioplayer > div {
  22.     position: absolute;
  23. }
  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. }
  37. .audioplayer-playpause:hover,
  38. .audioplayer-playpause:focus {
  39.     background-color: #024e48;
  40. }
  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. }
  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. }
  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. }
  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. }
  87. .audioplayer-playing .audioplayer-playpause a:before {
  88.     left: 0;
  89. }
  91. .audioplayer-playing .audioplayer-playpause a:after {
  92.     rightright: 0;
  93. }
  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. }
  105. .audioplayer-time-current {
  106.     left: 68px;
  107. }
  109. .audioplayer-time-duration {
  110.     rightright: 32px;
  111. }
  113. .audioplayer-novolume .audioplayer-time-duration {
  114.     border-right: 0;
  115.     rightright: 0;
  116. }
  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. }
  135. .audioplayer-novolume .audioplayer-bar {
  136.     rightright: 4.375em;
  137. }
  139. .audioplayer-bar div {
  140.     width: 0;
  141.     height: 100%;
  142.     position: absolute;
  143.     left: 0;
  144.     top: 0;
  145. }
  147. .audioplayer-bar-loaded {
  148.     background-color: #e4e4e4;
  149.     z-index: 1;
  150. }
  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. }
  168. .audioplayer-volume:hover,
  169. .audioplayer-volume:focus {
  170.     background-color: #f8f8f8;
  171. }
  173. .audioplayer-volume-button {
  174.     width: 100%;
  175.     height: 100%;
  176. }
  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. }
  192. .audioplayer-volume-button a:before,
  193. .audioplayer-volume-button a:after {
  194.     content: '';
  195.     position: absolute;
  196. }
  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. }
  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. }
  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]

HTML5/CSS3(3)HTML5音乐播放器(1)
本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/html5-audio-player.html
萨龙龙

萨龙龙

侠客

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

1341.93M234.08W￥2.93W

相关文章

CSS3带阴影的3D旋转作品展示

CSS3有太多实用、创新的网页交互效果，而今天跟大家介绍一个让人激动的3D图像旋转效果，使网页更加的生动、漂亮。 国外在HTML5/CSS3的技术上远比国内先进，大量的网站很早都已经使用最新的技术，国内使用HT…
HTML5/CSS310年前01.45W3

自定义联系表单，并使用HTML5/CSS3客户端验证

作为一个企业站点，客户可以通过电话、QQ等通讯方式很方便的联系到企业，但联系表单是一个必要的功能。 萨龙网络建站一般都使用wordpress作为开发平台，或者直接静态页面来展示企业网站。使用wordpress作…
HTML5/CSS310年前02.13W2

前端开发利器Emmet的介绍

曾经也为写HTML/CSS代码而烦恼过，不愿再写下去，感觉很烦琐，写那么多的尖括号，用的标签都是在重复写，而且绝大多数标题都需要闭合标签，再多几个无序列表就更头疼。 [related_poststagid="31…
HTML5/CSS310年前01.28W3

Emmet的高级功能与使用技巧

[infobox]前端开发工具Emmet的介绍，Emmet快速编写HTML代码和Emmet快速编写CSS样式分别介绍了Emmet的用途，编写HTML代码和CSS样式，今天再来介绍下Emmet的一些高级功能和使用技巧。…
HTML5/CSS310年前02.42W2

Emmet快速编写HTML代码

前面我们通过《前端开发利器Emmet的介绍》简单介绍了Emmet以及在编辑器中的安装，今天我们再来看用Emmet超高速的编写HTML代码。 [related_poststagid="31"] 缩写是Emmet…
HTML5/CSS310年前01.62W4

使用CSS3 @font-face打造个性化web字体

个性化的web字体，如萨龙网络的标题、页脚小工具标题、宣传语等都用的是个性化的web字体，在CSS3之前，web设计师们都只能使用电脑中安装好的字体，或者把字体做成图片。自从有了CSS3强大的@font-face功能…
HTML5/CSS310年前02.15W5