<div class="wysiwyg__share-link-list">
    <a
        target="_blank" rel="noopener"
        class="wysiwyg__share-link"
        href="https://twitter.com/intent/tweet?text=<?php echo $encTitle; ?>&url=<?php echo $escPermalink; ?>">
        <svg class="wysiwyg__share-link-svg"><use xlink:href="#sprite-twitter"></use></svg>
    </a>
    <a
        target="_blank" rel="noopener"
        class="wysiwyg__share-link"
        href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $escPermalink; ?>">
        <svg class="wysiwyg__share-link-svg"><use xlink:href="#sprite-facebook"></use></svg>
    </a>
    <a
        target="_blank" rel="noopener"
        class="wysiwyg__share-link"
        href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $escPermalink; ?>&title=<?php echo $encTitle; ?>&summary=<?php echo $escExcerpt; ?>">
        <svg class="wysiwyg__share-link-svg"><use xlink:href="#sprite-linkedin"></use></svg>
    </a>
</div>

<ul class="article__share-list js-share-list">
+    <li class="article__share-list-item">
+        <a href="https://twitter.com/intent/tweet?text={{twitterText}}&url={{url}}"
+           class="article__share-list-anchor js-social-share gtm-twitter"
+           rel="noopener" target="_blank"
+           aria-label="<?php _e('Share on Twitter', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-twitter"></use></svg>
+        </a>
+    </li>
+    <li class="article__share-list-item">
+        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&summary={{text}}"
+           class="article__share-list-anchor js-social-share gtm-linkedin"
+           rel="noopener" target="_blank"
+           aria-label="<?php _e('Share on LinkedIn', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-in"></use></svg>
+        </a>
+    </li>
+    <li class="article__share-list-item">
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{url}}"
+           class="article__share-list-anchor js-social-share gtm-facebook"
+           rel="noopener" target="_blank"
+           aria-label="<?php _e('Share on Facebook', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-facebook"></use></svg>
+        </a>
+    </li>
+    <li class="article__share-list-item">
+        <a href="mailto:?subject={{title}}&body={{url}}"
+           class="article__share-list-anchor js-social-share gtm-mailto"
+           rel="noopener"
+           aria-label="<?php _e('Share via email', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-mail"></use></svg>
+        </a>
+    </li>
+</ul>

ページネーションと表示するアイテムを別コンポーネントで管理する。

Pagination の変更を News を介して NewsList に通知する。

[![Image from Gyazo](https://i.gyazo.com/a6d72e3bf4b4744dc9dbe02d95ec6304.png)](https://gyazo.com/a6d72e3bf4b4744dc9dbe02d95ec6304)

<template>
  <nav>
    <ul>
      <li><a @click="first" href="#">&laquo;</a></li>
      <li><a @click="prev" href="#">&lt;</a></li>
      <li class="page" v-for="i in displayPageRange" :class="{active: i-1 === currentPage}" :key="i">
        <a @click="pageSelect(i)" href="#">{{i}}</a>
      </li>
      <li><a @click="next" href="#">&gt;</a></li>
      <li><a @click="last" href="#">&raquo;</a></li>
    </ul>
  </nav>
</template>

<script>
export default {
  data () {
    return {
      loadend: false,
      currentPage: 0,
    }
  },
  props: {
    items: Array,
    size: Number,
    pageRange: Number,
  },
  computed: {
    pages () {
      return Math.ceil(this.items.length / this.size);
    },
    displayPageRange () {
      const half = Math.ceil(this.pageRange / 2)
      /*
        pageRange が奇数or偶数で一度に表示されるページャの数に
        ばらつきが出てしまうためオフセットで対応
      */
      const isEven = this.pageRange%2 == 0
      const offset = isEven ? 1 : 2

      let start, end;

      if (this.pages < this.pageRange) {
        start = 1
        end = this.pages
      } else if (this.currentPage < half) {
        start = 1
        end = start + this.pageRange - 1
      } else if (this.pages - half < this.currentPage) {
        end = this.pages
        start = end - this.pageRange + 1
      } else {
        start = this.currentPage - half + offset
        end = this.currentPage + half
      }

      let indexes = []
      for (let i = start; i <= end; i++) {
        indexes.push(i)
      }
      return indexes
    },
    displayItems () {
      const head = this.currentPage * this.size
      return this.items.slice(head, head + this.size)
    },
    isSelected (page) {
      return page - 1 === this.currentPage
    }
  },
  methods: {
    first () {
      event.preventDefault()
      this.currentPage = 0
      this.updateDisplayItems()
    },
    last () {
      event.preventDefault()
      this.currentPage = this.pages - 1
      this.updateDisplayItems()
    },
    prev () {
      event.preventDefault()
      if (0 < this.currentPage) this.currentPage--
      this.updateDisplayItems()
    },
    next () {
      event.preventDefault()
      if (this.currentPage < this.pages - 1) this.currentPage++
      this.updateDisplayItems()
    },
    pageSelect (index) {
      event.preventDefault()
      this.currentPage = index - 1
      this.updateDisplayItems()
    },
    updateDisplayItems() {
      this.$emit('updateDisplayItems', this.displayItems)
    }
  },
  mounted() {
    this.updateDisplayItems()
  }
}
</script>

<style lang="scss" scoped>
nav{
  text-align: center;
}
li{
  list-style: none;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  line-height: 30px;
  a{
    text-decoration: none;
  }
}
.page{
  width: 30px;
}
.active{
  background-color: skyblue;
  a{
    color: $white-color;
  }
}
</style>

<template>
  <ul class="news__list">
    <li class="news__item" v-for="(article, i) in displayItems" :key="i">
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      displayItems: [],
    }
  },
  methods: {
    updateDisplayItems(items) {
      this.displayItems = items
    }
  }
}
</script>

<template>
  <section class="news">
    <NewsList ref="newsList" />
    <Pagination @updateDisplayItems="updateDisplayItems" :items="items" :size="3" :pageRange="4" />
  </section>
</template>

<script>
import Pagination from '~/components/molecules/Pagination'
import NewsList from '~/components/organisms/NewsList'
export default {
  components: {
    Pagination,
    NewsList
  },
  computed: {
    items() {
      return this.$store.getters['news/getAll'].news
    },
  },
  methods: {
    updateDisplayItems(items) {
      this.$refs.newsList.updateDisplayItems(items)
    }
  }
}
</script>

<!doctype html>
<html lang="en">
[[$head]]
  <body>
    <div class="container">
        [[$header]]

        [[$jumbotron-[[*class_key]]]]
    </div>
    
    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
              
                [[[[*class_key:is=`CollectionContainer`:then=`!$blog_listing`:else=`$blog_article`]]]]
    
            </div><!-- /.blog-main -->
        
            [[$aside]]
    
        </div><!-- /.row -->
    
    </main><!-- /.container -->

    <footer class="blog-footer">
        <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
        <p><a href="#">Back to top</a></p>
    </footer>
</body>
</html>

  <head>
    <meta charset="[[++modx_charset]]">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="[[*description]]">
    <title>[[*pagetitle]]</title>

    <link rel="canonical" href="[[~[[*id]]? &scheme=`full`]]">

    [[$styles]]

  </head>

      <header class="blog-header py-3">
        <div class="row flex-nowrap justify-content-between align-items-center">
          <div class="col-4 pt-1">
            <a class="text-muted" href="#">Subscribe</a>
          </div>
          <div class="col-4 text-center">
            <a class="blog-header-logo text-dark" href="[[~[[++site_start]]]]">[[++site_name]]</a>
          </div>
          <div class="col-4 d-flex justify-content-end align-items-center">
            <a class="text-muted" href="/find">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
            </a>
            <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
          </div>
        </div>
      </header>

      <div class="nav-scroller py-1 mb-2">
        <nav class="nav d-flex justify-content-between">
            [[TaggerGetTags? &groups=`2` &rowTpl=`tag.tpl` &showUnused=`1`]]
        </nav>
      </div>

<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
        [[getResources?
            &parents=`[[++site_start]]`
            &depth=`0`
            &limit=`1`
            &tpl=`post_meta.tpl`
        ]]
    </div>
</div>

<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
    <div class="col-md-6 px-0">
        [[$post_meta.tpl?
            &pagetitle=`[[*pagetitle]]`
            &description=`[[*description]]`
            &publishedon=`[[*publishedon]]`
        ]]
    </div>
</div>

<h1 class="display-4 font-italic">[[+pagetitle]]</h1>
[[+description:is=``:then=``:else=`<p class="lead my-3">[[+description]]</p>`]]
<p class="lead mb-0">[[+publishedon:date=`%b %d, %Y`]]</p>

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />

<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
<style>
    .bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    
    @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
    }
    /* stylelint-disable selector-list-comma-newline-after */
    
    .blog-header {
    line-height: 1;
    border-bottom: 1px solid #e5e5e5;
    }
    
    .blog-header-logo {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    }
    
    .blog-header-logo:hover {
    text-decoration: none;
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    }
    
    .display-4 {
    font-size: 2.5rem;
    }
    @media (min-width: 768px) {
    .display-4 {
    font-size: 3rem;
    }
    }
    
    .nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
    }
    
    .nav-scroller .nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    }
    
    .nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    }
    
    .card-img-right {
    height: 100%;
    border-radius: 0 3px 3px 0;
    }
    
    .flex-auto {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    }
    
    .h-250 { height: 250px; }
    @media (min-width: 768px) {
    .h-md-250 { height: 250px; }
    }
    
    /*
    * Blog name and description
    */
    .blog-title {
    margin-bottom: 0;
    font-size: 2rem;
    font-weight: 400;
    }
    .blog-description {
    font-size: 1.1rem;
    color: #999;
    }
    
    @media (min-width: 40em) {
    .blog-title {
    font-size: 3.5rem;
    }
    }
    
    /* Pagination */
    .blog-pagination {
    margin-bottom: 4rem;
    }
    .blog-pagination > .btn {
    border-radius: 2rem;
    }
    
    /*
    * Blog posts
    */
    .blog-post {
    margin-bottom: 4rem;
    }
    .blog-post-title {
    margin-bottom: .25rem;
    font-size: 2.5rem;
    }
    .blog-post-meta {
    margin-bottom: 1.25rem;
    color: #999;
    }
    
    /*
    * Footer
    */
    .blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
    }
    .blog-footer p:last-child {
    margin-bottom: 0;
    }
</style>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $(function() {
        });
    </script>
    <style type="text/css">
       div { color:red; }
    </style>
</head>
<body>
  	<div>系統升級中，4/1夜間停止服務，請您4/2上午9點再行連線操作。<br/>謝謝您的配合！</div>
  </body>
</html>

<!doctype html>
<html lang=""> <!-- -->

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content=""> <!-- Ovdje ide deskripcija ove stranice -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The viewport meta tag tells the browser that the width of the screen should be considered the "Full Width" of the page. -->  
  <meta name="theme-color" content="#fafafa"> <!-- Ovaj tag odredjuje boju pozadinu na telefonu hedera -->
  
  <link rel="manifest" href="site.webmanifest"> <!-- https://developer.mozilla.org/en-US/docs/Web/Manifest -->
  <link rel="apple-touch-icon" href="icon.png"> <!-- Ovaj tag se dodaje za iphone uredjaje kada neko spasi stranicu na homepage -->
  <link rel="stylesheet" href="css/main.css"> <!-- Ovdje ide naš modifikovani style -->

</head>

<body>


  <!-- Add your site or application content here -->
  <p>Hello world! This is HTML5 Boilerplate.</p>
  
  
 
  <script src="./index.js"></script>


  
</body>

</html>

<html>
  <tr>
    <td>Angela</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Philip</td>
    <td>14</td>
  </tr>
</html>

<style>
    /* Chrome, Safari and Opera syntax */
    :-webkit-full-screen {
        background-color: #EEEEEE;
        overflow: scroll !important;
    }
    /* Firefox syntax */
    :-moz-full-screen {
        background-color: #EEEEEE;
        overflow: scroll !important;
    }
    /* IE/Edge syntax */
    :-ms-fullscreen {
        background-color: #EEEEEE;
        overflow: scroll !important;
    }
    /* Standard syntax */
    :fullscreen {
        background-color: #EEEEEE;
        overflow: scroll !important;
    }
</style>

<script>
    function openFullscreen(postID) {
        var elem = document.getElementById("post"+postID);
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
            elem.msRequestFullscreen();
        }
        document.getElementById("iconFullScreen"+postID).style.display = "none";
        document.getElementById("iconFullScreenClose"+postID).style.display = "block";
    }
    function closeFullscreen(postID) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        document.getElementById("iconFullScreenClose"+postID).style.display = "none";
        document.getElementById("iconFullScreen"+postID).style.display = "block";
    }
</script>

<a id="iconFullScreen<?=$postID?>" onclick="openFullscreen(<?=$postID?>);"><i class="icon-size-fullscreen" data-toggle="tooltip" title="צפייה במסך מלא"></i></a>
<a id="iconFullScreenClose<?=$postID?>" style="display:none" onclick="closeFullscreen(<?=$postID?>);"><i class="icon-size-actual" data-toggle="tooltip" title="חזרה למסך רגיל"></i><br/><br/>חזרה למסך רגיל</a>

高さを指定すると正三角形を描画する

[![Image from Gyazo](https://i.gyazo.com/37075d718aa23c52f2f8f2e8d0da4bfe.png)](https://gyazo.com/37075d718aa23c52f2f8f2e8d0da4bfe)

http://apps.eky.hk/css-triangle-generator/ja

<template>
  <div :style="{borderWidth: border_width}"></div>
</template>

<script>
export default {
  props: {
    height: Number,
  },
  computed: {
    border_width() {
      return `${this.height/2+'px'} 0 ${this.height/2+'px'} ${Math.floor(this.height/2*Math.sqrt(3))+'px'}`
    },
  }
}
</script>

<style lang="scss" scoped>
div{
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #ff4d77;
}
</style>

function consoleDirectiveFookArguments(type, el, binding) {
  console.log('------------------------------------------');
  console.log('custom directive=button-click : ' + type);
  console.log('el: %o', el);
  console.log('binding: %o', binding);
  console.log('------------------------------------------');
}

Vue.directive('fallback-image', {
  bind: function(el, binding) {
    consoleDirectiveFookArguments('fallback-image.bind', el, binding);

    el.addEventListener('error', function() {
      el.src = 'https://dummyimage.com/500x100/000/ffffff.png&text=no+image'
    });
  },
  update: function(el, binding) {
    consoleDirectiveFookArguments('fallback-image.update', el, binding);

    if (binding.value === binding.oldValue) return;
  }
});

Vue.directive('custom-directive', {

  /**
   * ディレクティブが対象の要素に紐付いた一度だけ呼ばれる。
   * 初回のセットアップ処理を実行
   * 要素のイベントリスター登録等に使用
   * @param {Element} el ディレクティブが紐づく要素
   * @param {Object}  binding
   */
  bind: function(el, binding) {
    consoleDirectiveFookArguments('bind', el, binding);
  },
  /**
   * 紐付いた要素が親要素に挿入されたときに呼ばれる
   * 親要素が存在することを保証されるが、ドキュメントに要素がアタッチされていることは保証しない
   * @param {Element} el
   * @param {Object}  binding
   */
  inserted: function(el, binding) {
    consoleDirectiveFookArguments('inserted', el, binding);
  },
  /**
   * ディレクティブの値が変化などに伴って、紐付いた要素を含んでいるコンポーネントのVNodeが更新されるたびに呼ばれる
   * ディレクティブの値が変化しない場合でも呼ばれる場合がある。
   * その場合は以前の値と比較する等の処理が必要になる
   * @param {Element}  el ディレクティブが紐づく要素
   * @param {Object}   binding
   * @param {Object}   binding.def ディレクティブ定義オブジェクト
   * @param {Function} binding.def.bind
   * @param {Function} binding.def.inserted
   * @param {Function} binding.def.updated
   * @param {Function} binding.def.componentUpdated
   * @param {Function} binding.def.unbind
   * @param {String}   binding.name prefix(v-)なしのディレクティブ名
   * @param {String}   binding.rawName ディレクティブ名
   * @param {String}   binding.expression 文字列としてのバインディング式、ディレクティブ設定時に渡す
   *  <button v-custom-directive="expressionValue">aaa</button> => 'expressionValue'
   * @param {String}   binding.arg ディレクティブに渡される引数、ディレクティブ設定時に渡す
   *  <button v-custom-directive:foo>aaa</button> => 'foo'
   * @param {Object}   binding.modifiers 装飾子を含んだオブジェクトを参照できる、ディレクティブ設定時に渡す
   *  <button v-custom-directive.foo.bar>aaa</button> => {foo: true, bar: true}
   * @param {String}   binding.oldArg
   * @param {String}   binding.value   
   * @param {String}   binding.oldValue
   */
  updated: function(el, binding) {
    consoleDirectiveFookArguments('updated', el, binding);

    if (binding.value === binding.oldValue) return;

    // ディレクティブの値に変更がある
    // DOM操作を行う際に確認をすることで不要な処理を避ける
  },
  /**
   * コンポーネントのVNodeと子コンポーネントのVNodeが更新された場合に呼ばれる。
   * @param {Element} el
   * @param {Object}  binding
   */
  componentUpdated: function(el, binding) {
    consoleDirectiveFookArguments('componentUpdated', el, binding);
  },
  /**
   * ディレクティブが紐付いている要素から取り除かれた際、1度だけ呼ばれる。
   * bindで登録したインベントリスナーの削除等の後始末処理を行う。
   * @param {Element} el
   * @param {Object}  binding
   */
  unbind: function(el, binding) {
    consoleDirectiveFookArguments('unbind', el, binding);
  },
});

<button
  v-custom-directive:foo="expressionValue"
  @click="updateButton">update!</button>
</button>

    .podcast-player { background: #fff; @include size(100%, 40px); position: relative; z-index: 1; border: 1px solid lighten($gray, 40%);
        //&-mini { width: 40px; margin: 0 auto; }
        //&-mini .podcast-player-playpause { width: 100%; }
        > div { position: absolute; }
        &-playpause { background: $yellow; @include size(40px, 100%); font-size: 0; cursor: pointer; z-index: 2; top: 0; left: 0; 
            a { display: block; @include size(100%); border: none; /* border: 8px solid transparent; border-right: none; border-left-color: #000; content: ''; */ position: relative;  /* top: 50%; left: 50%; margin: -8px 0 0 -4px;  */
                &:before { content: ''; position: absolute; top: calc(50% - 10px); left: 11px; height: 20px; border: 5px solid transparent; border-left: 8px solid #000; display: block; transition: $transition; } 
                &:after { content: ''; position: absolute; top: calc(50% - 5px); left: 19px; height: 0; border: 5px solid transparent; border-left: 8px solid #000; display: block; transition: $transition;} 
            }
        }
        &-playing .podcast-player-playpause a {
            &:before { top: calc(50% - 10px); left: 11px; border: 0 solid transparent; border-left: 6px solid #000; height: 20px; } 
            &:after { top: calc(50% - 10px); left: 22px; border: 0 solid transparent; border-left: 6px solid #000; height: 20px;  } 
        }
        &-time { @include size(70px, 100%); line-height: 40px; text-align: left; padding-left: 10px; z-index: 2; top: 0; font-size: 14px; color: lighten($gray, 20%); }
        &-time-current { left: 40px; }
        &-time-duration { right: 40px; }
        &-novolume .podcast-player-time-duration { border-right: 0; right: 0; }
        &-bar { height: 10px; background-color: #fff; box-shadow: inset 0 0 0 1px $gray-light; cursor: pointer; z-index: 1; top: 50%; right: 110px; left: 110px; margin-top: -5px;  } 
        &-novolume .podcast-player-bar { right: 70px; } 
        &-bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; } 
        &-bar-loaded { background-color: $gray-light; z-index: 1; } 
        &-bar-played { background: $yellow; z-index: 2; } 
        &-volume { width: 40px; height: 100%; background: $gray-light; text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; right: 0; transition: $transition; } 
        &-volume:hover, 
        &-volume:focus { background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1);} 
        &-volume-button { width: 100%; height: 100%; } 
        &-volume-button a { width: 5px; height: 6px; background-color: #000; display: block; position: relative; z-index: 1; top: 40%; left: 35%; border: none; } 
        &-volume-button a:before, 
        &-volume-button a:after { content: ''; position: absolute; } 
        &-volume-button a:before { width: 0; height: 0; border: 8px solid transparent; border-left: none; border-right-color: #000; z-index: 2; top: 50%; left: 0; margin-top: -8px; } 
        &:not(.podcast-player-mute) .podcast-player-volume-button a:after { width: 6px; height: 6px; border: 4px double #000; border-width: 4px 4px 0 0; left: 9px; top: 0px; border-radius: 0 15px 0 0; transform: rotate(45deg) } 
        &-volume-adjust { width: 100%; height: 100px; cursor: default; position: absolute; left: 0; top: -9999px; background: #fff; box-shadow: 0 -2px 5px 0 rgba(0,0,0,.1); transition: $transition; } 
        &-volume:not(:hover) .podcast-player-volume-adjust { opacity: 0; } 
        &-volume:hover .podcast-player-volume-adjust { top: auto; bottom: 100%; } 
        &-volume-adjust > div { width: 40%; height: 80%; background-color: $gray-light; cursor: pointer; position: relative; z-index: 1; margin: 30% auto 0; } 
        &-volume-adjust div div { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: $yellow; } 
        &-novolume .podcast-player-volume { display: none; }
    }

    $('audio').audioPlayer({
        classPrefix: 'podcast-player', // default value: 'audioplayer'
        strPlay: 'Play', // default value: 'Play'
        strPause: 'Pause', // default value: 'Pause'
        strVolume: 'Volume', // default value: 'Volume'
    });

/*
    AUTHOR: Osvaldas Valutis, www.osvaldas.info
    https://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/comment-page-3/#comments
*/
!function(e,t,a,i){var n="ontouchstart"in t,o=n?"touchstart":"mousedown",u=n?"touchmove":"mousemove",l=n?"touchcancel":"mouseup",d=function(e){var t=Math.floor(e/3600),a=Math.floor(e%3600/60),i=Math.ceil(e%3600%60);return(0==t?"":t>0&&t.toString().length<2?"0"+t+":":t+":")+(a.toString().length<2?"0"+a:a)+":"+(i.toString().length<2?"0"+i:i)},r=function(e){var t=a.createElement("audio");return!(!t.canPlayType||!t.canPlayType("audio/"+e.split(".").pop().toLowerCase()+";").replace(/no/,""))};e.fn.audioPlayer=function(t){t=e.extend({classPrefix:"audioplayer",strPlay:"Play",strPause:"Pause",strVolume:"Volume"},t);var a={},i={playPause:"playpause",playing:"playing",time:"time",timeCurrent:"time-current",timeDuration:"time-duration",bar:"bar",barLoaded:"bar-loaded",barPlayed:"bar-played",volume:"volume",volumeButton:"volume-button",volumeAdjust:"volume-adjust",noVolume:"novolume",mute:"mute",mini:"mini"};for(var s in i)a[s]=t.classPrefix+"-"+i[s];return this.each(function(){if("audio"!=e(this).prop("tagName").toLowerCase())return!1;var i=e(this),s=i.attr("src"),v=""===(v=i.get(0).getAttribute("autoplay"))||"autoplay"===v,m=""===(m=i.get(0).getAttribute("loop"))||"loop"===m,c=!1;void 0===s?i.find("source").each(function(){if(void 0!==(s=e(this).attr("src"))&&r(s))return c=!0,!1}):r(s)&&(c=!0);var f=e('<div class="'+t.classPrefix+'">'+(c?e("<div>").append(i.eq(0).clone()).html():'<embed src="'+s+'" width="0" height="0" volume="100" autostart="'+v.toString()+'" loop="'+m.toString()+'" />')+'<div class="'+a.playPause+'" title="'+t.strPlay+'"><a href="#">'+t.strPlay+"</a></div></div>"),h=(h=c?f.find("audio"):f.find("embed")).get(0);if(c){f.find("audio").css({width:0,height:0,visibility:"hidden"}),f.append('<div class="'+a.time+" "+a.timeCurrent+'"></div><div class="'+a.bar+'"><div class="'+a.barLoaded+'"></div><div class="'+a.barPlayed+'"></div></div><div class="'+a.time+" "+a.timeDuration+'"></div><div class="'+a.volume+'"><div class="'+a.volumeButton+'" title="'+t.strVolume+'"><a href="#">'+t.strVolume+'</a></div><div class="'+a.volumeAdjust+'"><div><div></div></div></div></div>');var p=f.find("."+a.bar),g=f.find("."+a.barPlayed),y=f.find("."+a.barLoaded),b=f.find("."+a.timeCurrent),P=f.find("."+a.timeDuration),C=f.find("."+a.volumeButton),E=f.find("."+a.volumeAdjust+" > div"),w=0,L=function(e){theRealEvent=n?e.originalEvent.touches[0]:e,h.currentTime=Math.round(h.duration*(theRealEvent.pageX-p.offset().left)/p.width())},x=function(e){theRealEvent=n?e.originalEvent.touches[0]:e,h.volume=Math.abs((theRealEvent.pageY-(E.offset().top+E.height()))/E.height())},M=setInterval(function(){h.duration&&h.buffered.length&&(y.width(h.buffered.end(0)/h.duration*100+"%"),h.buffered.end(0)>=h.duration&&clearInterval(M))},100),S=h.volume,V=h.volume=.111;Math.round(1e3*h.volume)/1e3==V?h.volume=S:f.addClass(a.noVolume),P.html("&hellip;"),b.text(d(0)),h.addEventListener("loadeddata",function(){P.text(d(h.duration)),E.find("div").height(100*h.volume+"%"),w=h.volume}),h.addEventListener("timeupdate",function(){b.text(d(h.currentTime)),g.width(h.currentTime/h.duration*100+"%")}),h.addEventListener("volumechange",function(){E.find("div").height(100*h.volume+"%"),h.volume>0&&f.hasClass(a.mute)&&f.removeClass(a.mute),h.volume<=0&&!f.hasClass(a.mute)&&f.addClass(a.mute)}),h.addEventListener("ended",function(){f.removeClass(a.playing)}),p.on(o,function(e){L(e),p.on(u,function(e){L(e)})}).on(l,function(){p.unbind(u)}),C.on("click",function(){return f.hasClass(a.mute)?(f.removeClass(a.mute),h.volume=w):(f.addClass(a.mute),w=h.volume,h.volume=0),!1}),E.on(o,function(e){x(e),E.on(u,function(e){x(e)})}).on(l,function(){E.unbind(u)})}else f.addClass(a.mini);v&&f.addClass(a.playing),f.find("."+a.playPause).on("click",function(){return f.hasClass(a.playing)?(e(this).attr("title",t.strPlay).find("a").html(t.strPlay),f.removeClass(a.playing),c?h.pause():h.Stop()):(e(this).attr("title",t.strPause).find("a").html(t.strPause),f.addClass(a.playing),c?h.play():h.Play()),!1}),i.replaceWith(f)}),this}}(jQuery,window,document);

<audio src="<?php the_field('podcast_mp3_file'); ?>" controls></audio>