jekyll-miniaudio 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8cf76a253794e076b555f1b6643daf52de73e217e058e5e33475af7ce3de7085
+  data.tar.gz: 91a9858260ff059aeb0a76fe6d33e4f7545ebb1cd23f8e11b2699b0b8a9b2678
+SHA512:
+  metadata.gz: a7f85e2807816a83b9ab5dc4b1c863022c94c305df9c7839c25370579c65a53f37f209920b13eab036d50890894239ab766c29a1e82be14e96167016c4cf6b84
+  data.tar.gz: 6497a7359e5abdf56095b7a49cd371193c8f009a5f3ae1308aed64750e6b5834ed4d742e6b5289542e850f04721e97d4f0e1062bb02eb9ef45ca5e2b9bbe899b

data/.gitignore

@@ -0,0 +1,8 @@
+/.bundle/
+/.yardoc
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.travis.yml

@@ -0,0 +1,7 @@
+---
+sudo: false
+language: ruby
+cache: bundler
+rvm:
+  - 2.4.4
+before_install: gem install bundler -v 1.16.4

data/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in jekyll-miniaudio.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,74 @@
+PATH
+  remote: .
+  specs:
+    jekyll-miniaudio (0.1.0)
+      jekyll (~> 3.8)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.3)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7-x64-mingw32)
+    ffi (1.9.25-x64-mingw32)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.5)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-watch (2.1.2)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.1)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    minitest (5.11.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.3)
+    rake (10.5.0)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (3.3.0)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.4)
+    sass (3.7.2)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  x64-mingw32
+
+DEPENDENCIES
+  bundler (~> 1.16)
+  jekyll-miniaudio!
+  minitest (~> 5.0)
+  rake (~> 10.0)
+
+BUNDLED WITH
+   1.17.1

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 hailong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,46 @@
+# Jekyll::Miniaudio
+
+A minimal audio plugin for [Jekyll](https://jekyllrb.com/).
+
+The implementation is based on [HTML5 audio element](https://www.w3schools.com/html/html5_audio.asp) (without fallback support for flash), so a morden browser is expected.
+
+Audio formats support also depends on browsers, but generally mp3, wav, ogg are supported.
+
+See [Live Demo](https://hailengc.github.io/jekyll-miniaudio)
+
+## Installation
+
+- In your Jekyll project's Gemfile:
+  ```ruby
+    group :jekyll_plugins do
+        ...   # other plugins
+        jekyll-miniaudio # add here
+    end
+  ```
+  then `bundle install`.
+
+## Usage
+
+This plugin is a [Jekyll Tag](https://jekyllrb.com/docs/plugins/tags/), you just pass either an audio link or file path.
+
+- Use with audio link:
+
+  `{% miniaudio 'https://somewhere/themusic.mp3' %}`
+
+- Use with file path. For example if you have a demo.ma3 located in your assets/music folder, then just put:
+
+  `{% miniaudio '/assets/music/demo.mp3' %}`
+
+  ** Note: Ensure your file is accessible via http(s)://YOUR_HOST/assets/demo.mp3**
+
+## Issues and feature requests
+
+Feel free to create issues or send me email hailengc@gmail.com.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/hailengc/jekyll-miniaudio.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,10 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+end
+
+task :default => :test

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "jekyll/miniaudio"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/jekyll-miniaudio.gemspec

@@ -0,0 +1,30 @@
+
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "jekyll/miniaudio/version"
+
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-miniaudio"
+  spec.version       = Jekyll::Miniaudio::VERSION
+  spec.authors       = ["hailengc"]
+  spec.email         = ["hailengc@gmail.com"]
+
+  spec.summary       = %q{A minimal audio plugin for Jekyll}
+  spec.description   = %q{A minimal audio plugin for Jekyll, with HTML5 audio elemnt.}
+  spec.homepage      = "https://github.com/hailengc/jekyll-miniaudio"
+  spec.license       = "MIT"
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files         = Dir.chdir(File.expand_path('..', __FILE__)) do
+    `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.16"
+  spec.add_development_dependency "rake", "~> 10.0"
+  spec.add_development_dependency "minitest", "~> 5.0"
+  spec.add_dependency 'jekyll', '~> 3.8'
+end

data/lib/jekyll/miniaudio.rb

@@ -0,0 +1,37 @@
+require 'jekyll'
+require 'fileutils'
+require_relative 'miniaudio/version'
+
+class MiniAudio < Liquid::Tag
+  def initialize(tag_name, audio_url, options)
+    super
+    @audio_url = audio_url
+  end
+
+  def render(_context)
+    ma_path = File.join File.expand_path(__dir__), 'miniaudio'
+    template = File.read(File.join(ma_path, 'h5audio', 'template.html'))
+    Liquid::Template.parse(template).render(
+      'audioSrc' => @audio_url,
+      'title' => File.basename(@audio_url, '.*'),
+      'assets_path' => "/assets/miniaudio-#{Jekyll::Miniaudio::VERSION}",
+      'id' => Random.rand.to_s
+    )
+  end
+end
+
+Jekyll::Hooks.register :site, :after_init do |site|
+  destination_dir = site.config['destination']
+  dest_assets_path = File.join destination_dir, 'assets', "miniaudio-#{Jekyll::Miniaudio::VERSION}"
+  src_asset_path = File.join File.expand_path(__dir__), 'miniaudio', 'h5audio'
+  unless Dir.exist?(dest_assets_path)
+    FileUtils.cp_r(src_asset_path, dest_assets_path)
+  end
+
+  # make sure directory _sitesassets/miniaudio-*.*.* will be kept by jekyll
+  keep_files = site.config['keep_files']
+  asset_path = "assets/miniaudio-#{Jekyll::Miniaudio::VERSION}"
+  keep_files.push(asset_path) unless keep_files.include?(asset_path)
+end
+
+Liquid::Template.register_tag('miniaudio', MiniAudio)

data/lib/jekyll/miniaudio/h5audio/assets/loop-active.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.156 496.156" style="enable-background:new 0 0 496.156 496.156;" xml:space="preserve">
+<path style="fill:#32BEA6;" d="M0,248.08C0,111.06,111.069,0.002,248.074,0.002c137.013,0,248.082,111.059,248.082,248.078
+	c0,137.005-111.069,248.074-248.082,248.074C111.069,496.154,0,385.085,0,248.08z"/>
+<g>
+	<path style="fill:#ffffff;" d="M428.243,172.149c-10.348,0.023-20.694,0.054-31.042,0.077
+		c-23.272-52.177-68.95-89.871-126.649-98.91c-64.287-10.071-125.816,19.788-162.504,72.312
+		c-16.296,23.326,22.003,45.165,38.16,22.034c50.317-72.037,157.757-65.527,201.907,4.686c-9.559,0.022-19.118,0.046-28.678,0.068
+		c-2.674,0.008-4.574,1.197-5.749,2.877c-1.92,2.058-2.65,5.072-0.639,8.186c18.204,28.25,36.408,56.499,54.616,84.745
+		c3.061,4.747,9.663,4.708,12.696-0.046c18.062-28.338,36.126-56.675,54.188-85.013C437.538,178.48,433.602,172.135,428.243,172.149
+		z"/>
+	<path style="fill:#ffffff;" d="M350.353,327.224c-49.927,71.49-156.108,65.63-200.886-3.049c9.161-0.022,18.322-0.046,27.484-0.068
+		c2.666-0.008,4.563-1.19,5.741-2.865c1.924-2.059,2.658-5.072,0.646-8.197c-18.2-28.246-36.405-56.499-54.609-84.741
+		c-3.056-4.751-9.662-4.712-12.695,0.046c-18.063,28.334-36.13,56.671-54.196,85.009c-2.987,4.689,0.948,11.032,6.308,11.017
+		c10.669-0.027,21.337-0.054,32.006-0.08c23.498,51.319,68.777,88.332,125.865,97.275c64.287,10.072,125.816-19.784,162.496-72.312
+		C404.806,325.928,366.508,304.09,350.353,327.224z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/assets/loop.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.156 496.156" style="enable-background:new 0 0 496.156 496.156;" xml:space="preserve">
+<path style="fill:#32BEA6;" d="M0,248.08C0,111.06,111.069,0.002,248.074,0.002c137.013,0,248.082,111.059,248.082,248.078
+	c0,137.005-111.069,248.074-248.082,248.074C111.069,496.154,0,385.085,0,248.08z"/>
+<g>
+	<path style="fill:#4d4d4d;" d="M428.243,172.149c-10.348,0.023-20.694,0.054-31.042,0.077
+		c-23.272-52.177-68.95-89.871-126.649-98.91c-64.287-10.071-125.816,19.788-162.504,72.312
+		c-16.296,23.326,22.003,45.165,38.16,22.034c50.317-72.037,157.757-65.527,201.907,4.686c-9.559,0.022-19.118,0.046-28.678,0.068
+		c-2.674,0.008-4.574,1.197-5.749,2.877c-1.92,2.058-2.65,5.072-0.639,8.186c18.204,28.25,36.408,56.499,54.616,84.745
+		c3.061,4.747,9.663,4.708,12.696-0.046c18.062-28.338,36.126-56.675,54.188-85.013C437.538,178.48,433.602,172.135,428.243,172.149
+		z"/>
+	<path style="fill:#4d4d4d;" d="M350.353,327.224c-49.927,71.49-156.108,65.63-200.886-3.049c9.161-0.022,18.322-0.046,27.484-0.068
+		c2.666-0.008,4.563-1.19,5.741-2.865c1.924-2.059,2.658-5.072,0.646-8.197c-18.2-28.246-36.405-56.499-54.609-84.741
+		c-3.056-4.751-9.662-4.712-12.695,0.046c-18.063,28.334-36.13,56.671-54.196,85.009c-2.987,4.689,0.948,11.032,6.308,11.017
+		c10.669-0.027,21.337-0.054,32.006-0.08c23.498,51.319,68.777,88.332,125.865,97.275c64.287,10.072,125.816-19.784,162.496-72.312
+		C404.806,325.928,366.508,304.09,350.353,327.224z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/assets/pause.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
+<path style="fill:#E5AA17;" d="M496.158,248.085c0-137.021-111.07-248.082-248.076-248.082C111.07,0.002,0,111.062,0,248.085
+	c0,137.002,111.07,248.071,248.083,248.071C385.088,496.155,496.158,385.086,496.158,248.085z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M223.082,121.066h-60.006c-5.523,0-10,4.479-10,10v234.024c0,5.523,4.477,10,10,10h60.006
+		c5.523,0,10-4.477,10-10V131.066C233.082,125.545,228.605,121.066,223.082,121.066z"/>
+	<path style="fill:#FFFFFF;" d="M333.082,121.066h-60.006c-5.523,0-10,4.479-10,10v234.024c0,5.523,4.477,10,10,10h60.006
+		c5.523,0,10-4.477,10-10V131.066C343.082,125.545,338.605,121.066,333.082,121.066z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/assets/play.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
+<circle style="fill:#EBBA16;" cx="29" cy="29" r="29"/>
+<g>
+	<polygon style="fill:#FFFFFF;" points="44,29 22,44 22,29.273 22,14 	"/>
+	<path style="fill:#FFFFFF;" d="M22,45c-0.16,0-0.321-0.038-0.467-0.116C21.205,44.711,21,44.371,21,44V14
+		c0-0.371,0.205-0.711,0.533-0.884c0.328-0.174,0.724-0.15,1.031,0.058l22,15C44.836,28.36,45,28.669,45,29s-0.164,0.64-0.437,0.826
+		l-22,15C22.394,44.941,22.197,45,22,45z M23,15.893v26.215L42.225,29L23,15.893z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/assets/stop.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
+<path style="fill:#E04F5F;" d="M496.158,248.085c0-137.021-111.07-248.082-248.076-248.082C111.07,0.002,0,111.062,0,248.085
+	c0,137.002,111.07,248.071,248.083,248.071C385.088,496.155,496.158,385.086,496.158,248.085z"/>
+<path style="fill:#FFFFFF;" d="M353.079,133.078h-210c-5.523,0-10,4.479-10,10v210c0,5.523,4.477,10,10,10h210
+	c5.523,0,10-4.477,10-10v-210C363.079,137.557,358.602,133.078,353.079,133.078z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/assets/volume-down.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
+<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
+	c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
+<path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
+	h270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/assets/volume-up.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
+<path style="fill:#32BEA6;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
+	c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
+<path style="fill:#FFFFFF;" d="M383.546,206.55H289.08v-93.938c0-3.976-3.224-7.199-7.201-7.199H213.75
+	c-3.977,0-7.2,3.224-7.2,7.199v93.938h-93.937c-3.977,0-7.2,3.225-7.2,7.2v69.187c0,3.976,3.224,7.199,7.2,7.199h93.937v93.41
+	c0,3.976,3.224,7.199,7.2,7.199h68.129c3.978,0,7.201-3.224,7.201-7.199v-93.41h94.466c3.976,0,7.199-3.224,7.199-7.199V213.75
+	C390.745,209.774,387.521,206.55,383.546,206.55z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

data/lib/jekyll/miniaudio/h5audio/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>h5audio</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+</head>
+
+<body>
+    <div>Hello, here's the generated content of jekyll-miniaudio.</div>
+    <div id="ma-container" class="ma-container">
+        <audio class="ma-audio" src="demo.mp3">
+            <p>Your brower is too old, it does not support html5 audio play.</p>
+        </audio>
+        <div class="ma-player">
+            <div class="button-play">
+                <img src="assets/play.svg" alt="play-button">
+            </div>
+            <div class="progress-bar">
+                <div class="bar">
+                    <div class="brick">
+                    </div>
+                </div>
+            </div>
+            <div class="progress-panel">
+                <span class="current-time">00:00</span>
+                <span class="duration-time" style="display: none">00:00</span>
+            </div>
+            <div class="button-stop">
+                <img src="assets/stop.svg" alt="play-button">
+            </div>
+            <div class="button-loop">
+                <img src="assets/loop.svg" alt="play-button">
+            </div>
+            <div class="info-panel">
+                <div><span class="title">Title</span></div>
+            </div>
+            <div class="volume-up">
+                <img src="assets/volume-up.svg" alt="play-button">
+            </div>
+            <div class="volume-down">
+                <img src="assets/volume-down.svg" alt="play-button">
+            </div>
+        </div>
+    </div>
+    <script src="miniAudio.js"></script>
+    <script>
+        var h5Audio = new MiniAudio('ma-container', '');
+    </script>
+</body>
+
+
+</html>

data/lib/jekyll/miniaudio/h5audio/main.css

@@ -0,0 +1,70 @@
+.ma-container {
+  width: 350px;
+  height: 80px;
+  margin: 20px auto;
+  border-radius: 10px;
+  font-size: 0.8em;
+  background-image: linear-gradient(#eaf6fa, skyblue);
+}
+
+.ma-player {
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 15% 15% 40% 15% 15%;
+  grid-template-rows: 50% 50%;
+  justify-content: center;
+  align-content: center;
+}
+
+.ma-player div {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.ma-player button {
+  border: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.ma-player img {
+  cursor: pointer;
+  width: 60%;
+  height: 60%;
+}
+
+.progress-bar {
+  grid-column: 2/ 5;
+}
+
+.progress-bar .bar {
+  position: relative;
+  height: 3px;
+  width: 90%;
+  cursor: pointer;
+  background-color: grey;
+}
+
+.progress-bar .brick {
+  position: absolute;
+  left: 0px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 5px solid skyblue;
+  background-color: blue;
+  cursor: pointer;
+}
+
+.progress-panel {
+  cursor: pointer;
+}
+
+.info-panel{
+  flex-direction: column !important;
+}

data/lib/jekyll/miniaudio/h5audio/miniAudio.js

@@ -0,0 +1,247 @@
+var MiniAudio = (function() {
+  function MA(containerId, assetsPath, options) {
+    this.assetsPath = assetsPath;
+    this.elemRoot = document.getElementById(containerId);
+    this.elemPlayer = this.elemRoot.querySelector(".ma-player");
+    this.elemAudio = this.elemRoot.querySelector(".ma-audio");
+    this.bar = this.elemRoot.querySelector(".progress-bar .bar");
+    this.brick = this.elemRoot.querySelector(".progress-bar .brick");
+    this.elemAudio.loop = options && options.loop === true;
+    window.ha = this.elemAudio;
+    this.showCurrentTime = true;
+    this.init();
+  }
+
+  function _getTimeFromProgressOffset(progressOffset) {
+    const progressLength = this.bar.offsetWidth - this.brick.offsetWidth;
+    return (progressOffset / progressLength) * this.elemAudio.duration * 0.999;
+  }
+
+  function _setBarEventHandler(param) {
+    this.bar.addEventListener("click", event => {
+      let brickOffset =
+        event.clientX -
+        this.bar.getBoundingClientRect().left -
+        this.brick.offsetWidth / 2;
+      brickOffset = Math.min(
+        Math.max(0, brickOffset),
+        this.bar.offsetWidth - this.brick.offsetWidth
+      );
+      this.elemAudio.currentTime = _getTimeFromProgressOffset.call(
+        this,
+        brickOffset
+      );
+    });
+  }
+
+  function _setBrickEventHandlers() {
+    this.brick.addEventListener("mousedown", event => {
+      this.pause();
+      this.brickClick = true;
+    });
+
+    this.elemRoot.addEventListener("mouseup", event => {
+      if (this.brickClick) {
+        const brickOffset =
+          this.brick.getBoundingClientRect().left -
+          this.bar.getBoundingClientRect().left;
+        const timeOffset = _getTimeFromProgressOffset.call(this, brickOffset);
+        this.elemAudio.currentTime = timeOffset;
+        this.play();
+      }
+      this.brickClick = false;
+    });
+
+    this.elemRoot.addEventListener("mousemove", event => {
+      if (this.brickClick) {
+        let brickOffset =
+          event.clientX -
+          this.bar.getBoundingClientRect().left -
+          this.brick.offsetWidth / 2;
+        brickOffset = Math.min(
+          Math.max(0, brickOffset),
+          this.bar.offsetWidth - this.brick.offsetWidth
+        );
+
+        this.updateTimeText(
+          _getTimeFromProgressOffset.call(this, brickOffset),
+          "currentTime"
+        );
+        this.brick.style.left = Math.round(brickOffset) + "px";
+      }
+    });
+  }
+
+  function _addClickListener(selector, listener) {
+    this.elemRoot.querySelector(selector).addEventListener("click", listener);
+    this.listenerMap = this.listenerMap || {};
+    this.listenerMap[selector] = listener;
+  }
+
+  function _removeClickListener(selector) {
+    this.elemRoot
+      .querySelector(selector)
+      .removeEventListener("click", this.listenerMap[selector]);
+  }
+
+  function _updatePlayButtonImage() {
+    let selector = ".button-play img";
+    const playButtonImg = this.elemRoot.querySelector(selector);
+
+    _removeClickListener.call(this, selector);
+    if (this.elemAudio.paused) {
+      playButtonImg.src = this.assetsPath + "/assets/play.svg";
+      playButtonImg.alt = "play";
+      _addClickListener.call(this, selector, this.play.bind(this));
+    } else {
+      playButtonImg.src = this.assetsPath + "/assets/pause.svg";
+      playButtonImg.alt = "pause";
+      _addClickListener.call(this, selector, this.pause.bind(this));
+    }
+  }
+
+  function _updateLoopButtonImage() {
+    const loopButtonImg = this.elemRoot.querySelector(".button-loop img");
+    if (this.elemAudio.loop) {
+      loopButtonImg.src = this.assetsPath + "/assets/loop-active.svg";
+    } else {
+      loopButtonImg.src = this.assetsPath + "/assets/loop.svg";
+    }
+  }
+
+  function _toTimeString(duration) {
+    let minutes,
+      seconds = 0;
+    seconds = Math.floor(duration);
+    minutes = Math.floor(seconds / 60);
+    seconds = seconds % 60;
+    let ms = [minutes, seconds].map(v => {
+      let sv = v.toString();
+      return sv.length > 1 ? sv : "0" + sv;
+    });
+
+    return ms.join(":");
+  }
+
+  function _updateTime(timeText, timeType) {
+    const span =
+      timeType === "currentTime"
+        ? this.elemRoot.querySelector(".progress-panel .current-time")
+        : this.elemRoot.querySelector(".progress-panel .duration-time");
+    span.textContent = timeText;
+  }
+
+  MA.prototype.init = function() {
+    _addClickListener.call(this, ".button-play img", this.play.bind(this));
+    _addClickListener.call(this, ".button-stop img", this.stop.bind(this));
+    _addClickListener.call(this, ".volume-up img", this.volumeUp.bind(this));
+    _addClickListener.call(
+      this,
+      ".button-loop img",
+      this.toggleLoop.bind(this)
+    );
+    _addClickListener.call(
+      this,
+      ".volume-down img",
+      this.volumeDown.bind(this)
+    );
+
+    _addClickListener.call(
+      this,
+      ".progress-panel",
+      this.toggleTimeText.bind(this)
+    );
+
+    this.elemAudio.addEventListener(
+      "canplay",
+      () => {
+        this.updateTimeText(this.elemAudio.duration, "durationTime");
+      },
+      false
+    );
+
+    this.elemAudio.addEventListener(
+      "timeupdate",
+      () => {
+        this.updateTimeText(this.elemAudio.currentTime, "currentTime");
+
+        const offsetLeft =
+          (this.elemAudio.currentTime / this.elemAudio.duration) *
+          (this.bar.offsetWidth - this.brick.offsetWidth);
+        this.brick.style.left = Math.round(offsetLeft) + "px";
+      },
+      false
+    );
+
+    this.elemAudio.addEventListener(
+      "ended",
+      () => {
+        this.stop();
+      },
+      false
+    );
+
+    _setBrickEventHandlers.call(this);
+    _setBarEventHandler.call(this);
+  };
+
+  MA.prototype.updateTimeText = function(time, timeType) {
+    _updateTime.call(this, _toTimeString(time), timeType);
+  };
+
+  MA.prototype.toggleTimeText = function() {
+    const currentTime = this.elemRoot.querySelector(
+      ".progress-panel .current-time"
+    );
+    const durationTime = this.elemRoot.querySelector(
+      ".progress-panel .duration-time"
+    );
+    this.showCurrentTime = !this.showCurrentTime;
+    if (this.showCurrentTime) {
+      currentTime.style.display = "inherit";
+      durationTime.style.display = "none";
+    } else {
+      currentTime.style.display = "none";
+      durationTime.style.display = "inherit";
+      this.elemAudio.readyState > 1 &&  this.updateTimeText(this.elemAudio.duration, "durationTime");
+    }
+  };
+
+  MA.prototype.toggleLoop = function() {
+    this.elemAudio.loop = !this.elemAudio.loop;
+    _updateLoopButtonImage.call(this);
+  };
+
+  MA.prototype.stop = function() {
+    this.pause();
+    this.elemAudio.currentTime = 0;
+  };
+
+  MA.prototype.play = function() {
+    this.elemAudio.play();
+    _updatePlayButtonImage.call(this);
+  };
+
+  MA.prototype.pause = function() {
+    this.elemAudio.pause();
+    _updatePlayButtonImage.call(this);
+  };
+
+  MA.prototype.volumeUp = function() {
+    this.volumeChange(0.1);
+  };
+
+  MA.prototype.volumeDown = function() {
+    this.volumeChange(-0.1);
+  };
+
+  MA.prototype.volumeChange = function(v) {
+    const newVoulum = this.elemAudio.volume + v;
+    if (newVoulum < 0 || newVoulum > 1) {
+      return;
+    }
+    this.elemAudio.volume = newVoulum;
+  };
+
+  return MA;
+})();

data/lib/jekyll/miniaudio/h5audio/template.html

@@ -0,0 +1,40 @@
+<div id="{{id}}" class="ma-container">
+    <audio class="ma-audio" src={{ audioSrc }}>
+        <p>Your brower is too old, it does not support html5 audio play.</p>
+    </audio>
+    <div class="ma-player">
+        <div class="button-play">
+            <img src= "{{assets_path | append: '/assets/play.svg' }}" alt="play-button">
+        </div>
+        <div class="progress-bar">
+            <div class="bar">
+                <div class="brick">
+                </div>
+            </div>
+        </div>
+        <div class="progress-panel">
+            <span class="current-time">00:00</span>
+            <span class="duration-time" style="display: none">00:00</span>
+        </div>
+        <div class="button-stop">
+            <img src= "{{assets_path | append: '/assets/stop.svg'}}"  alt="play-button">
+        </div>
+        <div class="button-loop">
+            <img src= "{{assets_path | append: '/assets/loop.svg' }}"  alt="play-button">
+        </div>
+        <div class="info-panel">
+            <div><span class="title">{{ title }}</span></div>
+        </div>
+        <div class="volume-up">
+            <img src= "{{ assets_path | append: '/assets/volume-up.svg'}}"  alt="play-button">
+        </div>
+        <div class="volume-down">
+            <img src= "{{ assets_path | append: '/assets/volume-down.svg'}}" alt="play-button">
+        </div>
+    </div>
+</div>
+<link rel="stylesheet" href= "{{assets_path | append: '/main.css' }}">
+<script src= "{{assets_path | append: '/miniAudio.js'}}"></script>
+<script>
+    new MiniAudio('{{id}}', '{{ assets_path }}');
+</script>

data/lib/jekyll/miniaudio/version.rb

@@ -0,0 +1,5 @@
+module Jekyll
+  module Miniaudio
+    VERSION = "0.1.1"
+  end
+end

metadata

@@ -0,0 +1,123 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-miniaudio
+version: !ruby/object:Gem::Version
+  version: 0.1.1
+platform: ruby
+authors:
+- hailengc
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2018-11-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.16'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
+description: A minimal audio plugin for Jekyll, with HTML5 audio elemnt.
+email:
+- hailengc@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".travis.yml"
+- Gemfile
+- Gemfile.lock
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- jekyll-miniaudio.gemspec
+- lib/jekyll/miniaudio.rb
+- lib/jekyll/miniaudio/h5audio/assets/loop-active.svg
+- lib/jekyll/miniaudio/h5audio/assets/loop.svg
+- lib/jekyll/miniaudio/h5audio/assets/pause.svg
+- lib/jekyll/miniaudio/h5audio/assets/play.svg
+- lib/jekyll/miniaudio/h5audio/assets/stop.svg
+- lib/jekyll/miniaudio/h5audio/assets/volume-down.svg
+- lib/jekyll/miniaudio/h5audio/assets/volume-up.svg
+- lib/jekyll/miniaudio/h5audio/index.html
+- lib/jekyll/miniaudio/h5audio/main.css
+- lib/jekyll/miniaudio/h5audio/miniAudio.js
+- lib/jekyll/miniaudio/h5audio/template.html
+- lib/jekyll/miniaudio/version.rb
+homepage: https://github.com/hailengc/jekyll-miniaudio
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.7.6
+signing_key: 
+specification_version: 4
+summary: A minimal audio plugin for Jekyll
+test_files: []