jekyll-miniaudio 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +8 -0
- data/.travis.yml +7 -0
- data/Gemfile +6 -0
- data/Gemfile.lock +74 -0
- data/LICENSE.txt +21 -0
- data/README.md +46 -0
- data/Rakefile +10 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/jekyll-miniaudio.gemspec +30 -0
- data/lib/jekyll/miniaudio.rb +37 -0
- data/lib/jekyll/miniaudio/h5audio/assets/loop-active.svg +50 -0
- data/lib/jekyll/miniaudio/h5audio/assets/loop.svg +50 -0
- data/lib/jekyll/miniaudio/h5audio/assets/pause.svg +43 -0
- data/lib/jekyll/miniaudio/h5audio/assets/play.svg +42 -0
- data/lib/jekyll/miniaudio/h5audio/assets/stop.svg +39 -0
- data/lib/jekyll/miniaudio/h5audio/assets/volume-down.svg +39 -0
- data/lib/jekyll/miniaudio/h5audio/assets/volume-up.svg +41 -0
- data/lib/jekyll/miniaudio/h5audio/index.html +56 -0
- data/lib/jekyll/miniaudio/h5audio/main.css +70 -0
- data/lib/jekyll/miniaudio/h5audio/miniAudio.js +247 -0
- data/lib/jekyll/miniaudio/h5audio/template.html +40 -0
- data/lib/jekyll/miniaudio/version.rb +5 -0
- metadata +123 -0
checksums.yaml
ADDED
@@ -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
|
data/.gitignore
ADDED
data/.travis.yml
ADDED
data/Gemfile
ADDED
data/Gemfile.lock
ADDED
@@ -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
|
data/LICENSE.txt
ADDED
@@ -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.
|
data/README.md
ADDED
@@ -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).
|
data/Rakefile
ADDED
data/bin/console
ADDED
@@ -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__)
|
data/bin/setup
ADDED
@@ -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>
|
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: []
|