jekyll-miniaudio 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 8cf76a253794e076b555f1b6643daf52de73e217e058e5e33475af7ce3de7085
4
+ data.tar.gz: 91a9858260ff059aeb0a76fe6d33e4f7545ebb1cd23f8e11b2699b0b8a9b2678
5
+ SHA512:
6
+ metadata.gz: a7f85e2807816a83b9ab5dc4b1c863022c94c305df9c7839c25370579c65a53f37f209920b13eab036d50890894239ab766c29a1e82be14e96167016c4cf6b84
7
+ data.tar.gz: 6497a7359e5abdf56095b7a49cd371193c8f009a5f3ae1308aed64750e6b5834ed4d742e6b5289542e850f04721e97d4f0e1062bb02eb9ef45ca5e2b9bbe899b
@@ -0,0 +1,8 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /_yardoc/
4
+ /coverage/
5
+ /doc/
6
+ /pkg/
7
+ /spec/reports/
8
+ /tmp/
@@ -0,0 +1,7 @@
1
+ ---
2
+ sudo: false
3
+ language: ruby
4
+ cache: bundler
5
+ rvm:
6
+ - 2.4.4
7
+ before_install: gem install bundler -v 1.16.4
data/Gemfile ADDED
@@ -0,0 +1,6 @@
1
+ source "https://rubygems.org"
2
+
3
+ git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
4
+
5
+ # Specify your gem's dependencies in jekyll-miniaudio.gemspec
6
+ gemspec
@@ -0,0 +1,74 @@
1
+ PATH
2
+ remote: .
3
+ specs:
4
+ jekyll-miniaudio (0.1.0)
5
+ jekyll (~> 3.8)
6
+
7
+ GEM
8
+ remote: https://rubygems.org/
9
+ specs:
10
+ addressable (2.5.2)
11
+ public_suffix (>= 2.0.2, < 4.0)
12
+ colorator (1.1.0)
13
+ concurrent-ruby (1.1.3)
14
+ em-websocket (0.5.1)
15
+ eventmachine (>= 0.12.9)
16
+ http_parser.rb (~> 0.6.0)
17
+ eventmachine (1.2.7-x64-mingw32)
18
+ ffi (1.9.25-x64-mingw32)
19
+ forwardable-extended (2.6.0)
20
+ http_parser.rb (0.6.0)
21
+ i18n (0.9.5)
22
+ concurrent-ruby (~> 1.0)
23
+ jekyll (3.8.5)
24
+ addressable (~> 2.4)
25
+ colorator (~> 1.0)
26
+ em-websocket (~> 0.5)
27
+ i18n (~> 0.7)
28
+ jekyll-sass-converter (~> 1.0)
29
+ jekyll-watch (~> 2.0)
30
+ kramdown (~> 1.14)
31
+ liquid (~> 4.0)
32
+ mercenary (~> 0.3.3)
33
+ pathutil (~> 0.9)
34
+ rouge (>= 1.7, < 4)
35
+ safe_yaml (~> 1.0)
36
+ jekyll-sass-converter (1.5.2)
37
+ sass (~> 3.4)
38
+ jekyll-watch (2.1.2)
39
+ listen (~> 3.0)
40
+ kramdown (1.17.0)
41
+ liquid (4.0.1)
42
+ listen (3.1.5)
43
+ rb-fsevent (~> 0.9, >= 0.9.4)
44
+ rb-inotify (~> 0.9, >= 0.9.7)
45
+ ruby_dep (~> 1.2)
46
+ mercenary (0.3.6)
47
+ minitest (5.11.3)
48
+ pathutil (0.16.2)
49
+ forwardable-extended (~> 2.6)
50
+ public_suffix (3.0.3)
51
+ rake (10.5.0)
52
+ rb-fsevent (0.10.3)
53
+ rb-inotify (0.9.10)
54
+ ffi (>= 0.5.0, < 2)
55
+ rouge (3.3.0)
56
+ ruby_dep (1.5.0)
57
+ safe_yaml (1.0.4)
58
+ sass (3.7.2)
59
+ sass-listen (~> 4.0.0)
60
+ sass-listen (4.0.0)
61
+ rb-fsevent (~> 0.9, >= 0.9.4)
62
+ rb-inotify (~> 0.9, >= 0.9.7)
63
+
64
+ PLATFORMS
65
+ x64-mingw32
66
+
67
+ DEPENDENCIES
68
+ bundler (~> 1.16)
69
+ jekyll-miniaudio!
70
+ minitest (~> 5.0)
71
+ rake (~> 10.0)
72
+
73
+ BUNDLED WITH
74
+ 1.17.1
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2018 hailong
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,46 @@
1
+ # Jekyll::Miniaudio
2
+
3
+ A minimal audio plugin for [Jekyll](https://jekyllrb.com/).
4
+
5
+ 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.
6
+
7
+ Audio formats support also depends on browsers, but generally mp3, wav, ogg are supported.
8
+
9
+ See [Live Demo](https://hailengc.github.io/jekyll-miniaudio)
10
+
11
+ ## Installation
12
+
13
+ - In your Jekyll project's Gemfile:
14
+ ```ruby
15
+ group :jekyll_plugins do
16
+ ... # other plugins
17
+ jekyll-miniaudio # add here
18
+ end
19
+ ```
20
+ then `bundle install`.
21
+
22
+ ## Usage
23
+
24
+ This plugin is a [Jekyll Tag](https://jekyllrb.com/docs/plugins/tags/), you just pass either an audio link or file path.
25
+
26
+ - Use with audio link:
27
+
28
+ `{% miniaudio 'https://somewhere/themusic.mp3' %}`
29
+
30
+ - Use with file path. For example if you have a demo.ma3 located in your assets/music folder, then just put:
31
+
32
+ `{% miniaudio '/assets/music/demo.mp3' %}`
33
+
34
+ ** Note: Ensure your file is accessible via http(s)://YOUR_HOST/assets/demo.mp3**
35
+
36
+ ## Issues and feature requests
37
+
38
+ Feel free to create issues or send me email hailengc@gmail.com.
39
+
40
+ ## Contributing
41
+
42
+ Bug reports and pull requests are welcome on GitHub at https://github.com/hailengc/jekyll-miniaudio.
43
+
44
+ ## License
45
+
46
+ The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
@@ -0,0 +1,10 @@
1
+ require "bundler/gem_tasks"
2
+ require "rake/testtask"
3
+
4
+ Rake::TestTask.new(:test) do |t|
5
+ t.libs << "test"
6
+ t.libs << "lib"
7
+ t.test_files = FileList["test/**/*_test.rb"]
8
+ end
9
+
10
+ task :default => :test
@@ -0,0 +1,14 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "jekyll/miniaudio"
5
+
6
+ # You can add fixtures and/or initialization code here to make experimenting
7
+ # with your gem easier. You can also use a different console, if you like.
8
+
9
+ # (If you use this, don't forget to add pry to your Gemfile!)
10
+ # require "pry"
11
+ # Pry.start
12
+
13
+ require "irb"
14
+ IRB.start(__FILE__)
@@ -0,0 +1,8 @@
1
+ #!/usr/bin/env bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+ set -vx
5
+
6
+ bundle install
7
+
8
+ # Do any other automated setup that you need to do here
@@ -0,0 +1,30 @@
1
+
2
+ lib = File.expand_path("../lib", __FILE__)
3
+ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
+ require "jekyll/miniaudio/version"
5
+
6
+ Gem::Specification.new do |spec|
7
+ spec.name = "jekyll-miniaudio"
8
+ spec.version = Jekyll::Miniaudio::VERSION
9
+ spec.authors = ["hailengc"]
10
+ spec.email = ["hailengc@gmail.com"]
11
+
12
+ spec.summary = %q{A minimal audio plugin for Jekyll}
13
+ spec.description = %q{A minimal audio plugin for Jekyll, with HTML5 audio elemnt.}
14
+ spec.homepage = "https://github.com/hailengc/jekyll-miniaudio"
15
+ spec.license = "MIT"
16
+
17
+ # Specify which files should be added to the gem when it is released.
18
+ # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
19
+ spec.files = Dir.chdir(File.expand_path('..', __FILE__)) do
20
+ `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
21
+ end
22
+ spec.bindir = "exe"
23
+ spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
24
+ spec.require_paths = ["lib"]
25
+
26
+ spec.add_development_dependency "bundler", "~> 1.16"
27
+ spec.add_development_dependency "rake", "~> 10.0"
28
+ spec.add_development_dependency "minitest", "~> 5.0"
29
+ spec.add_dependency 'jekyll', '~> 3.8'
30
+ end
@@ -0,0 +1,37 @@
1
+ require 'jekyll'
2
+ require 'fileutils'
3
+ require_relative 'miniaudio/version'
4
+
5
+ class MiniAudio < Liquid::Tag
6
+ def initialize(tag_name, audio_url, options)
7
+ super
8
+ @audio_url = audio_url
9
+ end
10
+
11
+ def render(_context)
12
+ ma_path = File.join File.expand_path(__dir__), 'miniaudio'
13
+ template = File.read(File.join(ma_path, 'h5audio', 'template.html'))
14
+ Liquid::Template.parse(template).render(
15
+ 'audioSrc' => @audio_url,
16
+ 'title' => File.basename(@audio_url, '.*'),
17
+ 'assets_path' => "/assets/miniaudio-#{Jekyll::Miniaudio::VERSION}",
18
+ 'id' => Random.rand.to_s
19
+ )
20
+ end
21
+ end
22
+
23
+ Jekyll::Hooks.register :site, :after_init do |site|
24
+ destination_dir = site.config['destination']
25
+ dest_assets_path = File.join destination_dir, 'assets', "miniaudio-#{Jekyll::Miniaudio::VERSION}"
26
+ src_asset_path = File.join File.expand_path(__dir__), 'miniaudio', 'h5audio'
27
+ unless Dir.exist?(dest_assets_path)
28
+ FileUtils.cp_r(src_asset_path, dest_assets_path)
29
+ end
30
+
31
+ # make sure directory _sitesassets/miniaudio-*.*.* will be kept by jekyll
32
+ keep_files = site.config['keep_files']
33
+ asset_path = "assets/miniaudio-#{Jekyll::Miniaudio::VERSION}"
34
+ keep_files.push(asset_path) unless keep_files.include?(asset_path)
35
+ end
36
+
37
+ Liquid::Template.register_tag('miniaudio', MiniAudio)
@@ -0,0 +1,50 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 496.156 496.156" style="enable-background:new 0 0 496.156 496.156;" xml:space="preserve">
5
+ <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
6
+ c0,137.005-111.069,248.074-248.082,248.074C111.069,496.154,0,385.085,0,248.08z"/>
7
+ <g>
8
+ <path style="fill:#ffffff;" d="M428.243,172.149c-10.348,0.023-20.694,0.054-31.042,0.077
9
+ 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
10
+ 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
11
+ 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
12
+ 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
13
+ z"/>
14
+ <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
15
+ 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
16
+ 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
17
+ 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
18
+ C404.806,325.928,366.508,304.09,350.353,327.224z"/>
19
+ </g>
20
+ <g>
21
+ </g>
22
+ <g>
23
+ </g>
24
+ <g>
25
+ </g>
26
+ <g>
27
+ </g>
28
+ <g>
29
+ </g>
30
+ <g>
31
+ </g>
32
+ <g>
33
+ </g>
34
+ <g>
35
+ </g>
36
+ <g>
37
+ </g>
38
+ <g>
39
+ </g>
40
+ <g>
41
+ </g>
42
+ <g>
43
+ </g>
44
+ <g>
45
+ </g>
46
+ <g>
47
+ </g>
48
+ <g>
49
+ </g>
50
+ </svg>
@@ -0,0 +1,50 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 496.156 496.156" style="enable-background:new 0 0 496.156 496.156;" xml:space="preserve">
5
+ <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
6
+ c0,137.005-111.069,248.074-248.082,248.074C111.069,496.154,0,385.085,0,248.08z"/>
7
+ <g>
8
+ <path style="fill:#4d4d4d;" d="M428.243,172.149c-10.348,0.023-20.694,0.054-31.042,0.077
9
+ 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
10
+ 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
11
+ 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
12
+ 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
13
+ z"/>
14
+ <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
15
+ 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
16
+ 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
17
+ 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
18
+ C404.806,325.928,366.508,304.09,350.353,327.224z"/>
19
+ </g>
20
+ <g>
21
+ </g>
22
+ <g>
23
+ </g>
24
+ <g>
25
+ </g>
26
+ <g>
27
+ </g>
28
+ <g>
29
+ </g>
30
+ <g>
31
+ </g>
32
+ <g>
33
+ </g>
34
+ <g>
35
+ </g>
36
+ <g>
37
+ </g>
38
+ <g>
39
+ </g>
40
+ <g>
41
+ </g>
42
+ <g>
43
+ </g>
44
+ <g>
45
+ </g>
46
+ <g>
47
+ </g>
48
+ <g>
49
+ </g>
50
+ </svg>
@@ -0,0 +1,43 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
5
+ <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
6
+ c0,137.002,111.07,248.071,248.083,248.071C385.088,496.155,496.158,385.086,496.158,248.085z"/>
7
+ <g>
8
+ <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
9
+ c5.523,0,10-4.477,10-10V131.066C233.082,125.545,228.605,121.066,223.082,121.066z"/>
10
+ <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
11
+ c5.523,0,10-4.477,10-10V131.066C343.082,125.545,338.605,121.066,333.082,121.066z"/>
12
+ </g>
13
+ <g>
14
+ </g>
15
+ <g>
16
+ </g>
17
+ <g>
18
+ </g>
19
+ <g>
20
+ </g>
21
+ <g>
22
+ </g>
23
+ <g>
24
+ </g>
25
+ <g>
26
+ </g>
27
+ <g>
28
+ </g>
29
+ <g>
30
+ </g>
31
+ <g>
32
+ </g>
33
+ <g>
34
+ </g>
35
+ <g>
36
+ </g>
37
+ <g>
38
+ </g>
39
+ <g>
40
+ </g>
41
+ <g>
42
+ </g>
43
+ </svg>
@@ -0,0 +1,42 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
5
+ <circle style="fill:#EBBA16;" cx="29" cy="29" r="29"/>
6
+ <g>
7
+ <polygon style="fill:#FFFFFF;" points="44,29 22,44 22,29.273 22,14 "/>
8
+ <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
9
+ 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
10
+ l-22,15C22.394,44.941,22.197,45,22,45z M23,15.893v26.215L42.225,29L23,15.893z"/>
11
+ </g>
12
+ <g>
13
+ </g>
14
+ <g>
15
+ </g>
16
+ <g>
17
+ </g>
18
+ <g>
19
+ </g>
20
+ <g>
21
+ </g>
22
+ <g>
23
+ </g>
24
+ <g>
25
+ </g>
26
+ <g>
27
+ </g>
28
+ <g>
29
+ </g>
30
+ <g>
31
+ </g>
32
+ <g>
33
+ </g>
34
+ <g>
35
+ </g>
36
+ <g>
37
+ </g>
38
+ <g>
39
+ </g>
40
+ <g>
41
+ </g>
42
+ </svg>
@@ -0,0 +1,39 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
5
+ <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
6
+ c0,137.002,111.07,248.071,248.083,248.071C385.088,496.155,496.158,385.086,496.158,248.085z"/>
7
+ <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
8
+ c5.523,0,10-4.477,10-10v-210C363.079,137.557,358.602,133.078,353.079,133.078z"/>
9
+ <g>
10
+ </g>
11
+ <g>
12
+ </g>
13
+ <g>
14
+ </g>
15
+ <g>
16
+ </g>
17
+ <g>
18
+ </g>
19
+ <g>
20
+ </g>
21
+ <g>
22
+ </g>
23
+ <g>
24
+ </g>
25
+ <g>
26
+ </g>
27
+ <g>
28
+ </g>
29
+ <g>
30
+ </g>
31
+ <g>
32
+ </g>
33
+ <g>
34
+ </g>
35
+ <g>
36
+ </g>
37
+ <g>
38
+ </g>
39
+ </svg>
@@ -0,0 +1,39 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
5
+ <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
6
+ c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
7
+ <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
8
+ 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"/>
9
+ <g>
10
+ </g>
11
+ <g>
12
+ </g>
13
+ <g>
14
+ </g>
15
+ <g>
16
+ </g>
17
+ <g>
18
+ </g>
19
+ <g>
20
+ </g>
21
+ <g>
22
+ </g>
23
+ <g>
24
+ </g>
25
+ <g>
26
+ </g>
27
+ <g>
28
+ </g>
29
+ <g>
30
+ </g>
31
+ <g>
32
+ </g>
33
+ <g>
34
+ </g>
35
+ <g>
36
+ </g>
37
+ <g>
38
+ </g>
39
+ </svg>
@@ -0,0 +1,41 @@
1
+ <?xml version="1.0" encoding="iso-8859-1"?>
2
+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 496.158 496.158" style="enable-background:new 0 0 496.158 496.158;" xml:space="preserve">
5
+ <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
6
+ c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
7
+ <path style="fill:#FFFFFF;" d="M383.546,206.55H289.08v-93.938c0-3.976-3.224-7.199-7.201-7.199H213.75
8
+ 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
9
+ 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
10
+ C390.745,209.774,387.521,206.55,383.546,206.55z"/>
11
+ <g>
12
+ </g>
13
+ <g>
14
+ </g>
15
+ <g>
16
+ </g>
17
+ <g>
18
+ </g>
19
+ <g>
20
+ </g>
21
+ <g>
22
+ </g>
23
+ <g>
24
+ </g>
25
+ <g>
26
+ </g>
27
+ <g>
28
+ </g>
29
+ <g>
30
+ </g>
31
+ <g>
32
+ </g>
33
+ <g>
34
+ </g>
35
+ <g>
36
+ </g>
37
+ <g>
38
+ </g>
39
+ <g>
40
+ </g>
41
+ </svg>
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <title>h5audio</title>
8
+ <meta name="viewport" content="width=device-width, initial-scale=1">
9
+ <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
10
+ </head>
11
+
12
+ <body>
13
+ <div>Hello, here's the generated content of jekyll-miniaudio.</div>
14
+ <div id="ma-container" class="ma-container">
15
+ <audio class="ma-audio" src="demo.mp3">
16
+ <p>Your brower is too old, it does not support html5 audio play.</p>
17
+ </audio>
18
+ <div class="ma-player">
19
+ <div class="button-play">
20
+ <img src="assets/play.svg" alt="play-button">
21
+ </div>
22
+ <div class="progress-bar">
23
+ <div class="bar">
24
+ <div class="brick">
25
+ </div>
26
+ </div>
27
+ </div>
28
+ <div class="progress-panel">
29
+ <span class="current-time">00:00</span>
30
+ <span class="duration-time" style="display: none">00:00</span>
31
+ </div>
32
+ <div class="button-stop">
33
+ <img src="assets/stop.svg" alt="play-button">
34
+ </div>
35
+ <div class="button-loop">
36
+ <img src="assets/loop.svg" alt="play-button">
37
+ </div>
38
+ <div class="info-panel">
39
+ <div><span class="title">Title</span></div>
40
+ </div>
41
+ <div class="volume-up">
42
+ <img src="assets/volume-up.svg" alt="play-button">
43
+ </div>
44
+ <div class="volume-down">
45
+ <img src="assets/volume-down.svg" alt="play-button">
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <script src="miniAudio.js"></script>
50
+ <script>
51
+ var h5Audio = new MiniAudio('ma-container', '');
52
+ </script>
53
+ </body>
54
+
55
+
56
+ </html>
@@ -0,0 +1,70 @@
1
+ .ma-container {
2
+ width: 350px;
3
+ height: 80px;
4
+ margin: 20px auto;
5
+ border-radius: 10px;
6
+ font-size: 0.8em;
7
+ background-image: linear-gradient(#eaf6fa, skyblue);
8
+ }
9
+
10
+ .ma-player {
11
+ margin: auto;
12
+ width: 100%;
13
+ height: 100%;
14
+ display: grid;
15
+ grid-template-columns: 15% 15% 40% 15% 15%;
16
+ grid-template-rows: 50% 50%;
17
+ justify-content: center;
18
+ align-content: center;
19
+ }
20
+
21
+ .ma-player div {
22
+ display: flex;
23
+ flex-direction: row;
24
+ justify-content: center;
25
+ align-items: center;
26
+ }
27
+
28
+ .ma-player button {
29
+ border: none;
30
+ width: 40px;
31
+ height: 40px;
32
+ border-radius: 50%;
33
+ }
34
+
35
+ .ma-player img {
36
+ cursor: pointer;
37
+ width: 60%;
38
+ height: 60%;
39
+ }
40
+
41
+ .progress-bar {
42
+ grid-column: 2/ 5;
43
+ }
44
+
45
+ .progress-bar .bar {
46
+ position: relative;
47
+ height: 3px;
48
+ width: 90%;
49
+ cursor: pointer;
50
+ background-color: grey;
51
+ }
52
+
53
+ .progress-bar .brick {
54
+ position: absolute;
55
+ left: 0px;
56
+ width: 10px;
57
+ height: 10px;
58
+ border-radius: 50%;
59
+ border: 5px solid skyblue;
60
+ background-color: blue;
61
+ cursor: pointer;
62
+ }
63
+
64
+ .progress-panel {
65
+ cursor: pointer;
66
+ }
67
+
68
+ .info-panel{
69
+ flex-direction: column !important;
70
+ }
@@ -0,0 +1,247 @@
1
+ var MiniAudio = (function() {
2
+ function MA(containerId, assetsPath, options) {
3
+ this.assetsPath = assetsPath;
4
+ this.elemRoot = document.getElementById(containerId);
5
+ this.elemPlayer = this.elemRoot.querySelector(".ma-player");
6
+ this.elemAudio = this.elemRoot.querySelector(".ma-audio");
7
+ this.bar = this.elemRoot.querySelector(".progress-bar .bar");
8
+ this.brick = this.elemRoot.querySelector(".progress-bar .brick");
9
+ this.elemAudio.loop = options && options.loop === true;
10
+ window.ha = this.elemAudio;
11
+ this.showCurrentTime = true;
12
+ this.init();
13
+ }
14
+
15
+ function _getTimeFromProgressOffset(progressOffset) {
16
+ const progressLength = this.bar.offsetWidth - this.brick.offsetWidth;
17
+ return (progressOffset / progressLength) * this.elemAudio.duration * 0.999;
18
+ }
19
+
20
+ function _setBarEventHandler(param) {
21
+ this.bar.addEventListener("click", event => {
22
+ let brickOffset =
23
+ event.clientX -
24
+ this.bar.getBoundingClientRect().left -
25
+ this.brick.offsetWidth / 2;
26
+ brickOffset = Math.min(
27
+ Math.max(0, brickOffset),
28
+ this.bar.offsetWidth - this.brick.offsetWidth
29
+ );
30
+ this.elemAudio.currentTime = _getTimeFromProgressOffset.call(
31
+ this,
32
+ brickOffset
33
+ );
34
+ });
35
+ }
36
+
37
+ function _setBrickEventHandlers() {
38
+ this.brick.addEventListener("mousedown", event => {
39
+ this.pause();
40
+ this.brickClick = true;
41
+ });
42
+
43
+ this.elemRoot.addEventListener("mouseup", event => {
44
+ if (this.brickClick) {
45
+ const brickOffset =
46
+ this.brick.getBoundingClientRect().left -
47
+ this.bar.getBoundingClientRect().left;
48
+ const timeOffset = _getTimeFromProgressOffset.call(this, brickOffset);
49
+ this.elemAudio.currentTime = timeOffset;
50
+ this.play();
51
+ }
52
+ this.brickClick = false;
53
+ });
54
+
55
+ this.elemRoot.addEventListener("mousemove", event => {
56
+ if (this.brickClick) {
57
+ let brickOffset =
58
+ event.clientX -
59
+ this.bar.getBoundingClientRect().left -
60
+ this.brick.offsetWidth / 2;
61
+ brickOffset = Math.min(
62
+ Math.max(0, brickOffset),
63
+ this.bar.offsetWidth - this.brick.offsetWidth
64
+ );
65
+
66
+ this.updateTimeText(
67
+ _getTimeFromProgressOffset.call(this, brickOffset),
68
+ "currentTime"
69
+ );
70
+ this.brick.style.left = Math.round(brickOffset) + "px";
71
+ }
72
+ });
73
+ }
74
+
75
+ function _addClickListener(selector, listener) {
76
+ this.elemRoot.querySelector(selector).addEventListener("click", listener);
77
+ this.listenerMap = this.listenerMap || {};
78
+ this.listenerMap[selector] = listener;
79
+ }
80
+
81
+ function _removeClickListener(selector) {
82
+ this.elemRoot
83
+ .querySelector(selector)
84
+ .removeEventListener("click", this.listenerMap[selector]);
85
+ }
86
+
87
+ function _updatePlayButtonImage() {
88
+ let selector = ".button-play img";
89
+ const playButtonImg = this.elemRoot.querySelector(selector);
90
+
91
+ _removeClickListener.call(this, selector);
92
+ if (this.elemAudio.paused) {
93
+ playButtonImg.src = this.assetsPath + "/assets/play.svg";
94
+ playButtonImg.alt = "play";
95
+ _addClickListener.call(this, selector, this.play.bind(this));
96
+ } else {
97
+ playButtonImg.src = this.assetsPath + "/assets/pause.svg";
98
+ playButtonImg.alt = "pause";
99
+ _addClickListener.call(this, selector, this.pause.bind(this));
100
+ }
101
+ }
102
+
103
+ function _updateLoopButtonImage() {
104
+ const loopButtonImg = this.elemRoot.querySelector(".button-loop img");
105
+ if (this.elemAudio.loop) {
106
+ loopButtonImg.src = this.assetsPath + "/assets/loop-active.svg";
107
+ } else {
108
+ loopButtonImg.src = this.assetsPath + "/assets/loop.svg";
109
+ }
110
+ }
111
+
112
+ function _toTimeString(duration) {
113
+ let minutes,
114
+ seconds = 0;
115
+ seconds = Math.floor(duration);
116
+ minutes = Math.floor(seconds / 60);
117
+ seconds = seconds % 60;
118
+ let ms = [minutes, seconds].map(v => {
119
+ let sv = v.toString();
120
+ return sv.length > 1 ? sv : "0" + sv;
121
+ });
122
+
123
+ return ms.join(":");
124
+ }
125
+
126
+ function _updateTime(timeText, timeType) {
127
+ const span =
128
+ timeType === "currentTime"
129
+ ? this.elemRoot.querySelector(".progress-panel .current-time")
130
+ : this.elemRoot.querySelector(".progress-panel .duration-time");
131
+ span.textContent = timeText;
132
+ }
133
+
134
+ MA.prototype.init = function() {
135
+ _addClickListener.call(this, ".button-play img", this.play.bind(this));
136
+ _addClickListener.call(this, ".button-stop img", this.stop.bind(this));
137
+ _addClickListener.call(this, ".volume-up img", this.volumeUp.bind(this));
138
+ _addClickListener.call(
139
+ this,
140
+ ".button-loop img",
141
+ this.toggleLoop.bind(this)
142
+ );
143
+ _addClickListener.call(
144
+ this,
145
+ ".volume-down img",
146
+ this.volumeDown.bind(this)
147
+ );
148
+
149
+ _addClickListener.call(
150
+ this,
151
+ ".progress-panel",
152
+ this.toggleTimeText.bind(this)
153
+ );
154
+
155
+ this.elemAudio.addEventListener(
156
+ "canplay",
157
+ () => {
158
+ this.updateTimeText(this.elemAudio.duration, "durationTime");
159
+ },
160
+ false
161
+ );
162
+
163
+ this.elemAudio.addEventListener(
164
+ "timeupdate",
165
+ () => {
166
+ this.updateTimeText(this.elemAudio.currentTime, "currentTime");
167
+
168
+ const offsetLeft =
169
+ (this.elemAudio.currentTime / this.elemAudio.duration) *
170
+ (this.bar.offsetWidth - this.brick.offsetWidth);
171
+ this.brick.style.left = Math.round(offsetLeft) + "px";
172
+ },
173
+ false
174
+ );
175
+
176
+ this.elemAudio.addEventListener(
177
+ "ended",
178
+ () => {
179
+ this.stop();
180
+ },
181
+ false
182
+ );
183
+
184
+ _setBrickEventHandlers.call(this);
185
+ _setBarEventHandler.call(this);
186
+ };
187
+
188
+ MA.prototype.updateTimeText = function(time, timeType) {
189
+ _updateTime.call(this, _toTimeString(time), timeType);
190
+ };
191
+
192
+ MA.prototype.toggleTimeText = function() {
193
+ const currentTime = this.elemRoot.querySelector(
194
+ ".progress-panel .current-time"
195
+ );
196
+ const durationTime = this.elemRoot.querySelector(
197
+ ".progress-panel .duration-time"
198
+ );
199
+ this.showCurrentTime = !this.showCurrentTime;
200
+ if (this.showCurrentTime) {
201
+ currentTime.style.display = "inherit";
202
+ durationTime.style.display = "none";
203
+ } else {
204
+ currentTime.style.display = "none";
205
+ durationTime.style.display = "inherit";
206
+ this.elemAudio.readyState > 1 && this.updateTimeText(this.elemAudio.duration, "durationTime");
207
+ }
208
+ };
209
+
210
+ MA.prototype.toggleLoop = function() {
211
+ this.elemAudio.loop = !this.elemAudio.loop;
212
+ _updateLoopButtonImage.call(this);
213
+ };
214
+
215
+ MA.prototype.stop = function() {
216
+ this.pause();
217
+ this.elemAudio.currentTime = 0;
218
+ };
219
+
220
+ MA.prototype.play = function() {
221
+ this.elemAudio.play();
222
+ _updatePlayButtonImage.call(this);
223
+ };
224
+
225
+ MA.prototype.pause = function() {
226
+ this.elemAudio.pause();
227
+ _updatePlayButtonImage.call(this);
228
+ };
229
+
230
+ MA.prototype.volumeUp = function() {
231
+ this.volumeChange(0.1);
232
+ };
233
+
234
+ MA.prototype.volumeDown = function() {
235
+ this.volumeChange(-0.1);
236
+ };
237
+
238
+ MA.prototype.volumeChange = function(v) {
239
+ const newVoulum = this.elemAudio.volume + v;
240
+ if (newVoulum < 0 || newVoulum > 1) {
241
+ return;
242
+ }
243
+ this.elemAudio.volume = newVoulum;
244
+ };
245
+
246
+ return MA;
247
+ })();
@@ -0,0 +1,40 @@
1
+ <div id="{{id}}" class="ma-container">
2
+ <audio class="ma-audio" src={{ audioSrc }}>
3
+ <p>Your brower is too old, it does not support html5 audio play.</p>
4
+ </audio>
5
+ <div class="ma-player">
6
+ <div class="button-play">
7
+ <img src= "{{assets_path | append: '/assets/play.svg' }}" alt="play-button">
8
+ </div>
9
+ <div class="progress-bar">
10
+ <div class="bar">
11
+ <div class="brick">
12
+ </div>
13
+ </div>
14
+ </div>
15
+ <div class="progress-panel">
16
+ <span class="current-time">00:00</span>
17
+ <span class="duration-time" style="display: none">00:00</span>
18
+ </div>
19
+ <div class="button-stop">
20
+ <img src= "{{assets_path | append: '/assets/stop.svg'}}" alt="play-button">
21
+ </div>
22
+ <div class="button-loop">
23
+ <img src= "{{assets_path | append: '/assets/loop.svg' }}" alt="play-button">
24
+ </div>
25
+ <div class="info-panel">
26
+ <div><span class="title">{{ title }}</span></div>
27
+ </div>
28
+ <div class="volume-up">
29
+ <img src= "{{ assets_path | append: '/assets/volume-up.svg'}}" alt="play-button">
30
+ </div>
31
+ <div class="volume-down">
32
+ <img src= "{{ assets_path | append: '/assets/volume-down.svg'}}" alt="play-button">
33
+ </div>
34
+ </div>
35
+ </div>
36
+ <link rel="stylesheet" href= "{{assets_path | append: '/main.css' }}">
37
+ <script src= "{{assets_path | append: '/miniAudio.js'}}"></script>
38
+ <script>
39
+ new MiniAudio('{{id}}', '{{ assets_path }}');
40
+ </script>
@@ -0,0 +1,5 @@
1
+ module Jekyll
2
+ module Miniaudio
3
+ VERSION = "0.1.1"
4
+ end
5
+ end
metadata ADDED
@@ -0,0 +1,123 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: jekyll-miniaudio
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.1
5
+ platform: ruby
6
+ authors:
7
+ - hailengc
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2018-11-09 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.16'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.16'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: minitest
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - "~>"
46
+ - !ruby/object:Gem::Version
47
+ version: '5.0'
48
+ type: :development
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - "~>"
53
+ - !ruby/object:Gem::Version
54
+ version: '5.0'
55
+ - !ruby/object:Gem::Dependency
56
+ name: jekyll
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - "~>"
60
+ - !ruby/object:Gem::Version
61
+ version: '3.8'
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - "~>"
67
+ - !ruby/object:Gem::Version
68
+ version: '3.8'
69
+ description: A minimal audio plugin for Jekyll, with HTML5 audio elemnt.
70
+ email:
71
+ - hailengc@gmail.com
72
+ executables: []
73
+ extensions: []
74
+ extra_rdoc_files: []
75
+ files:
76
+ - ".gitignore"
77
+ - ".travis.yml"
78
+ - Gemfile
79
+ - Gemfile.lock
80
+ - LICENSE.txt
81
+ - README.md
82
+ - Rakefile
83
+ - bin/console
84
+ - bin/setup
85
+ - jekyll-miniaudio.gemspec
86
+ - lib/jekyll/miniaudio.rb
87
+ - lib/jekyll/miniaudio/h5audio/assets/loop-active.svg
88
+ - lib/jekyll/miniaudio/h5audio/assets/loop.svg
89
+ - lib/jekyll/miniaudio/h5audio/assets/pause.svg
90
+ - lib/jekyll/miniaudio/h5audio/assets/play.svg
91
+ - lib/jekyll/miniaudio/h5audio/assets/stop.svg
92
+ - lib/jekyll/miniaudio/h5audio/assets/volume-down.svg
93
+ - lib/jekyll/miniaudio/h5audio/assets/volume-up.svg
94
+ - lib/jekyll/miniaudio/h5audio/index.html
95
+ - lib/jekyll/miniaudio/h5audio/main.css
96
+ - lib/jekyll/miniaudio/h5audio/miniAudio.js
97
+ - lib/jekyll/miniaudio/h5audio/template.html
98
+ - lib/jekyll/miniaudio/version.rb
99
+ homepage: https://github.com/hailengc/jekyll-miniaudio
100
+ licenses:
101
+ - MIT
102
+ metadata: {}
103
+ post_install_message:
104
+ rdoc_options: []
105
+ require_paths:
106
+ - lib
107
+ required_ruby_version: !ruby/object:Gem::Requirement
108
+ requirements:
109
+ - - ">="
110
+ - !ruby/object:Gem::Version
111
+ version: '0'
112
+ required_rubygems_version: !ruby/object:Gem::Requirement
113
+ requirements:
114
+ - - ">="
115
+ - !ruby/object:Gem::Version
116
+ version: '0'
117
+ requirements: []
118
+ rubyforge_project:
119
+ rubygems_version: 2.7.6
120
+ signing_key:
121
+ specification_version: 4
122
+ summary: A minimal audio plugin for Jekyll
123
+ test_files: []