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

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

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. });
  5. (function(e, t, n, r) {
  6.     var i = "ontouchstart" in t,
  7.         s = i ? "touchstart" : "mousedown",
  8.         o = i ? "touchmove" : "mousemove",
  9.         u = i ? "touchend" : "mouseup",
  10.         a = i ? "touchcancel" : "mouseup",
  11.         f = function(e) {
  12.             var t = Math.floor(e / 3600),
  13.                 n = Math.floor(e % 3600 / 60),
  14.                 r = Math.ceil(e % 3600 % 60);
  15.             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)
  16.         },
  17.         l = function(e) {
  18.             var t = n.createElement("audio");
  19.             return !!(t.canPlayType && t.canPlayType("audio/" + e.split(".").pop().toLowerCase() + ";").replace(/no/, ""))
  20.         };
  21.     e.fn.audioPlayer = function(t) {
  22.         var t = e.extend({
  23.                 classPrefix: "audioplayer",
  24.                 strPlay: "播放",
  25.                 strPause: "暂停",
  26.                 strVolume: "音量"
  27.             }, t),
  28.             n = {},
  29.             r = {
  30.                 playPause: "playpause",
  31.                 playing: "playing",
  32.                 time: "time",
  33.                 timeCurrent: "time-current",
  34.                 timeDuration: "time-duration",
  35.                 bar: "bar",
  36.                 barLoaded: "bar-loaded",
  37.                 barPlayed: "bar-played",
  38.                 volume: "volume",
  39.                 volumeButton: "volume-button",
  40.                 noVolume: "novolume",
  41.                 mute: "mute",
  42.                 mini: "mini"
  43.             };
  44.         for (var u in r) n[u] = t.classPrefix + "-" + r[u];
  45.         this.each(function() {
  46.             if (e(this).prop("tagName").toLowerCase() != "audio"return false;
  47.             var r = e(this),
  48.                 u = r.attr("src"),
  49.                 c = r.get(0).getAttribute("autoplay"),
  50.                 c = c === "" || c === "autoplay" ? true : false,
  51.                 h = r.get(0).getAttribute("loop"),
  52.                 h = h === "" || h === "loop" ? true : false,
  53.                 p = false;
  54.             if (typeof u === "undefined") {
  55.                 r.find("source").each(function() {
  56.                     u = e(this).attr("src");
  57.                     if (typeof u !== "undefined" && l(u)) {
  58.                         p = true;
  59.                         return false
  60.                     }
  61.                 })
  62.             } else if (l(u)) p = true;
  63.             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>"),
  64.                 v = p ? d.find("audio") : d.find("embed"),
  65.                 v = v.get(0);
  66.             if (p) {
  67.                 d.find("audio").css({
  68.                     width: 0,
  69.                     height: 0,
  70.                     visibility: "hidden"
  71.                 });
  72.                 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>');
  73.                 var m = d.find("." + n.bar),
  74.                     g = d.find("." + n.barPlayed),
  75.                     y = d.find("." + n.barLoaded),
  76.                     b = d.find("." + n.timeCurrent),
  77.                     w = d.find("." + n.timeDuration),
  78.                     E = d.find("." + n.volumeButton),
  79.                     S = d.find("." + n.volumeAdjust + " > div"),
  80.                     x = 0,
  81.                     T = function(e) {
  82.                         theRealEvent = i ? e.originalEvent.touches[0] : e;
  83.                         v.currentTime = Math.round(v.duration * (theRealEvent.pageX - m.offset().left) / m.width())
  84.                     },
  85.                     N = function(e) {
  86.                         theRealEvent = i ? e.originalEvent.touches[0] : e;
  87.                         v.volume = Math.abs((theRealEvent.pageY - (S.offset().top + S.height())) / S.height())
  88.                     },
  89.                     C = setInterval(function() {
  90.                         y.width(v.buffered.end(0) / v.duration * 100 + "%");
  91.                         if (v.buffered.end(0) >= v.duration) clearInterval(C)
  92.                     }, 100);
  93.                 var k = v.volume,
  94.                     L = v.volume = .111;
  95.                 if (Math.round(v.volume * 1e3) / 1e3 == L) v.volume = k;
  96.                 else d.addClass(n.noVolume);
  97.                 w.html("…");
  98.                 b.text(f(0));
  99.                 v.addEventListener("loadeddata"function() {
  100.                     w.text(f(v.duration));
  101.                     S.find("div").height(v.volume * 100 + "%");
  102.                     x = v.volume
  103.                 });
  104.                 v.addEventListener("timeupdate"function() {
  105.                     b.text(f(v.currentTime));
  106.                     g.width(v.currentTime / v.duration * 100 + "%")
  107.                 });
  108.                 v.addEventListener("volumechange"function() {
  109.                     S.find("div").height(v.volume * 100 + "%");
  110.                     if (v.volume > 0 && d.hasClass(n.mute)) d.removeClass(n.mute);
  111.                     if (v.volume <= 0 && !d.hasClass(n.mute)) d.addClass(n.mute)
  112.                 });
  113.                 v.addEventListener("ended"function() {
  114.                     d.removeClass(n.playing)
  115.                 });
  116.                 m.on(s, function(e) {
  117.                     T(e);
  118.                     m.on(o, function(e) {
  119.                         T(e)
  120.                     })
  121.                 }).on(a, function() {
  122.                     m.unbind(o)
  123.                 });
  124.                 E.on("click"function() {
  125.                     if (d.hasClass(n.mute)) {
  126.                         d.removeClass(n.mute);
  127.                         v.volume = x
  128.                     } else {
  129.                         d.addClass(n.mute);
  130.                         x = v.volume;
  131.                         v.volume = 0
  132.                     }
  133.                     return false
  134.                 });
  135.                 S.on(s, function(e) {
  136.                     N(e);
  137.                     S.on(o, function(e) {
  138.                         N(e)
  139.                     })
  140.                 }).on(a, function() {
  141.                     S.unbind(o)
  142.                 })
  143.             } else d.addClass(n.mini);
  144.             if (c) d.addClass(n.playing);
  145.             d.find("." + n.playPause).on("click"function() {
  146.                 if (d.hasClass(n.playing)) {
  147.                     e(this).attr("title", t.strPlay).find("a").html(t.strPlay);
  148.                     d.removeClass(n.playing);
  149.                     p ? v.pause() : v.Stop()
  150.                 } else {
  151.                     e(this).attr("title", t.strPause).find("a").html(t.strPause);
  152.                     d.addClass(n.playing);
  153.                     p ? v.play() : v.Play()
  154.                 }
  155.                 return false
  156.             });
  157.             r.replaceWith(d)
  158.         });
  159.         return this
  160.     }
  161. })(jQuery, window, document)

CSS代码

添加到主题文件的CSS文件中

  1. /***************HTML5音乐播放器***************/
  2. .player{
  3.     background-color#fff;
  4.     border-top1px #eee solid;
  5.     border-right1px #eee solid;
  6.     border-left1px #eee solid;
  7.     padding20px;
  8. }
  9. .player h3{
  10.     margin12px 0 0 8px;
  11. }
  12. /*播放按钮*/
  13. .audioplayer {
  14.     height54px;
  15.     width: 100%;
  16.     positionrelative;
  17.     z-index: 1;
  18.     background-color#f8f8f8;
  19. }
  20. .audioplayer > div {
  21.     positionabsolute;
  22. }
  23. .audioplayer-playpause {
  24.     width32px;
  25.     height32px;
  26.     border-radius: 100%;
  27.     background-color#447110;
  28.     text-indent: -9999px;
  29.     cursorpointer;
  30.     z-index: 2;
  31.     top10px;
  32.     left20px;
  33. }
  34. .audioplayer-playpause:hover,
  35. .audioplayer-playpause:focus {
  36.     background-color#024e48;
  37. }
  38. .audioplayer-playpause a {
  39.     displayblock;
  40.     -webkit-transition: none;
  41.     -moz-transition: none;
  42.     -ms-transition: none;
  43.     -o-transition: none;
  44.     transition: none;
  45. }
  46. .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a {
  47.     width: 0;
  48.     height: 0;
  49.     border6px solid transparent;
  50.     border-rightnone;
  51.     border-left-color#fff;
  52.     content'';
  53.     positionabsolute;
  54.     top: 50%;
  55.     left: 50%;
  56.     margin: -6px 0 0 -2px;
  57.     /* 8 4 */
  58.     ;
  59. }
  60. .audioplayer-playing .audioplayer-playpause a {
  61.     width9px;
  62.     height9px;
  63.     positionabsolute;
  64.     top: 50%;
  65.     left: 50%;
  66.     margin: -4px 0 0 -4px;
  67.     /* 6 */
  68.     ;
  69. }
  70. .audioplayer-playing .audioplayer-playpause a:before,
  71. .audioplayer-playing .audioplayer-playpause a:after {
  72.     width: 40%;
  73.     height: 100%;
  74.     background-color#fff;
  75.     content'';
  76.     positionabsolute;
  77.     top: 0;
  78. }
  79. .audioplayer-playing .audioplayer-playpause a:before {
  80.     left: 0;
  81. }
  82. .audioplayer-playing .audioplayer-playpause a:after {
  83.     rightright: 0;
  84. }
  85. /*时间*/
  86. .audioplayer-time {
  87.     width46px;
  88.     height: 100%;
  89.     line-height54px;
  90.     text-aligncenter;
  91.     z-index: 2;
  92.     top: 0;
  93. }
  94. .audioplayer-time-current {
  95.     left68px;
  96. }
  97. .audioplayer-time-duration {
  98.     rightright32px;
  99. }
  100. .audioplayer-novolume .audioplayer-time-duration {
  101.     border-right: 0;
  102.     rightright: 0;
  103. }
  104. /*播放条*/
  105. .audioplayer-bar {
  106.     height8px;
  107.     /* 14 */
  108.     background-color#e4e4e4;
  109.     cursorpointer;
  110.     z-index: 1;
  111.     top: 50%;
  112.     rightright: 6.875em;
  113.     /* 110 */
  114.     left120px;
  115.     /* 110 */
  116.     margin-top: -4px;
  117.     /* 7 */
  118.     ;
  119. }
  120. .audioplayer-novolume .audioplayer-bar {
  121.     rightright: 4.375em;
  122. }
  123. .audioplayer-bar div {
  124.     width: 0;
  125.     height: 100%;
  126.     positionabsolute;
  127.     left: 0;
  128.     top: 0;
  129. }
  130. .audioplayer-bar-loaded {
  131.     background-color#e4e4e4;
  132.     z-index: 1;
  133. }
  134. .audioplayer-bar-played {
  135.     background#447110;
  136.     z-index: 2;
  137. }
  138. /*音量*/
  139. .audioplayer-volume {
  140.     width36px;
  141.     height: 100%;
  142.     text-alignleft;
  143.     text-indent: -9999px;
  144.     cursorpointer;
  145.     z-index: 2;
  146.     top: 0;
  147.     rightright: 0;
  148. }
  149. .audioplayer-volume:hover,
  150. .audioplayer-volume:focus {
  151.     background-color#f8f8f8;
  152. }
  153. .audioplayer-volume-button {
  154.     width: 100%;
  155.     height: 100%;
  156. }
  157. .audioplayer-volume-button a {
  158.     width: 0.313em;
  159.     /* 5 */
  160.     height: 0.375em;
  161.     /* 6 */
  162.     background-color#447110;
  163.     displayblock;
  164.     positionrelative;
  165.     z-index: 1;
  166.     top: 50%;
  167.     left: 35%;
  168.     margin-top: -2px;
  169. }
  170. .audioplayer-volume-button a:before,
  171. .audioplayer-volume-button a:after {
  172.     content'';
  173.     positionabsolute;
  174. }
  175. .audioplayer-volume-button a:before {
  176.     width: 0;
  177.     height: 0;
  178.     border: 0.5em solid transparent;
  179.     /* 8 */
  180.     border-leftnone;
  181.     border-right-color#447110;
  182.     z-index: 2;
  183.     top: 50%;
  184.     rightright: -0.25em;
  185.     margin-top: -0.5em;
  186.     /* 8 */
  187.     ;
  188. }
  189. .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after {
  190.     /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
  191.     width: 0.313em;
  192.     /* 5 */
  193.     height: 0.313em;
  194.     /* 5 */
  195.     border: 0.25em double #447110;
  196.     /* 4 */
  197.     border-width: 0.25em 0.25em 0 0;
  198.     /* 4 */
  199.     left: 0.563em;
  200.     /* 9 */
  201.     top: -0.063em;
  202.     /* 1 */
  203.     -webkit-border-radius: 0 0.938em 0 0;
  204.     /* 15 */
  205.     -moz-border-radius: 0 0.938em 0 0;
  206.     /* 15 */
  207.     border-radius: 0 0.938em 0 0;
  208.     /* 15 */
  209.     -webkit-transform: rotate( 45deg);
  210.     -moz-transform: rotate( 45deg);
  211.     -ms-transform: rotate( 45deg);
  212.     -o-transform: rotate( 45deg);
  213.     transform: rotate( 45deg);
  214. }
  215. /***************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]

本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/html5-audio-player.html