Merge branch 'feature/mp3_support' into dev

assets/audio.scss

@@ -0,0 +1,76 @@
+.audio-player {
+    display: -webkit-flex;
+    display: flex;
+    align-items: center;
+    width: 300px;
+    background-color: #ededed;
+    border-radius: 20px;
+    margin-bottom: 20px;
+}
+
+
+.left_part {
+    padding-left: 20px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    width: 240px;
+}
+
+.music_title {
+    font-size: 16px;
+    text-align: center;
+    margin-bottom: 10px;
+    color: #3f3f3f;
+}
+
+.music_duration {
+    color: #91a0ae;
+    display: flex;
+    justify-content: space-between;
+}
+
+.music_progress {
+    background-color: #c6bfbf;
+    border-radius: 5px;
+    height: 6px;
+    position: relative;
+    cursor: pointer;
+}
+  
+.progress_inplay {
+    background-color: #5781b2;
+    border-radius: 5px;
+    height: 100%;
+    width: 0%;
+    transition: all 0.2s linear;
+}
+
+
+.right_part {
+    margin-left: 30px;
+    width: 80px;
+}
+
+
+.player_controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+.fas {
+    color: #5781b2;
+    cursor: pointer;
+    margin-right: 25px;
+    user-select: none;
+    transition: all 0.3s ease-in;
+  }
+
+.fas:hover {
+    filter: brightness(80%);
+  }
+
+.play-button {
+    font-size: 36px;
+}
+

layouts/partials/head.html

@@ -35,6 +35,8 @@
 <!-- the Moments style css file -->
 {{ $style := resources.Get "style-refractored.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
+{{ $style_2 := resources.Get "audio.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style_2.Permalink }}">
 
 <!-- fancybox css (js in the end before the body closing tag) -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
@@ -69,5 +71,8 @@
 {{ end }}
 
 
+{{/* audio file play */}}
+<script src="/scripts/audio-play.js"></script>
+
 <!-- website title -->
 <title>{{ .Site.Params.title }}</title>

layouts/partials/link-block.html

@@ -3,6 +3,7 @@
 {{ $resource_type := "link" }}
 
 {{ $logo_file := "default_link_logo.png" }}
+{{ $index := .index | safeJS }}
 
 {{/* 1.1 Wechat articles */}}
 {{ if eq 1 (len (findRE `(https?://)?mp\.weixin\.qq\.com([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` .a)) }}
@@ -49,6 +50,14 @@
     {{ $bilibili_video_url = replaceRE `<iframe src="(//player\.bilibili.com/player\.html\?aid=.*&bvid=.*&cid=.*&page=1)" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>` "$1" .a }}
 {{ end }}
 
+
+{{/* 2.3 audio/music support */}}
+{{ if eq 1 (len (findRE `.*\.(mp3|MP3|flac|FLAC|wav|WAV)` .a)) }}
+    {{ $resource_type = "audio_file" }}
+    {{ $audio_file_url := .a }}
+{{ end }}
+
+
 {{/* BEGIN generate output */}}
 {{/* PART 1 default link */}}
 {{ if eq "link" $resource_type }}
@@ -83,4 +92,48 @@
 <div class="bilibili-video">
     <iframe src="{{ $bilibili_video_url }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
 </div>
-{{ end }}
+{{ end }}
+
+
+{{/* audio/music support */}}
+{{ if eq "audio_file" $resource_type }}
+
+<div class="audio-player">
+    <div class="left_part">
+        <div class="music_title">{{ .word }}</div>
+        <div class="music_duration">
+            <span id="currentTime_{{ $index }}">00 : 00</span>
+            <span id="duration_{{ $index }}">00 : 00</span>
+        </div>
+        <div class="music_progress" id="playerProgress_{{ $index }}">
+            <div class="progress_inplay" id="progress_{{ $index }}"></div>
+        </div>
+    </div>
+
+    <div class="right_part">
+        <div class="player_controls">
+            <i class="fas fa-play play-button" id="playBtn_{{ $index }}"></i>
+        </div>
+    </div>
+</div>
+
+<script>
+    let song_{{ $index }} = new Audio();
+    song_{{ $index }}.src = "{{ .a }}";
+
+    let playerProgress_{{ $index }} = document.getElementById("playerProgress_{{ $index }}");
+    let progress_{{ $index }} = document.getElementById("progress_{{ $index }}");
+    let currentTime_{{ $index }} = document.getElementById("currentTime_{{ $index }}");
+    let duration_{{ $index }} = document.getElementById("duration_{{ $index }}");
+    let playBtn_{{ $index }} = document.getElementById("playBtn_{{ $index }}");
+
+    song_{{ $index }}.addEventListener("ended", () => togglePlay(song_{{ $index }}, progress_{{ $index }}));
+    song_{{ $index }}.addEventListener("timeupdate", () => updateProgressBar(progress_{{ $index }}, duration_{{ $index }}, currentTime_{{ $index }}, song_{{ $index }}));
+
+    playerProgress_{{ $index }}.addEventListener("click", e => setProgressBar(e, playerProgress_{{ $index }}, song_{{ $index }}));
+    playBtn_{{ $index }}.addEventListener("click", () => togglePlay(song_{{ $index }}, playBtn_{{ $index }}));
+</script>
+
+{{ end }}
+
+

layouts/partials/row.html

@@ -131,7 +131,7 @@
 
                     {{ with $page.Params.link }}
                         {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl"
-                        $page.Site.BaseURL)}}
+                        $page.Site.BaseURL "index" $index) }}
                     {{ end }}
 
                     {{/* Note info shown below the main content */}}

static/scripts/audio-play.js

@@ -0,0 +1,49 @@
+let currentPlayBtn = null;
+let currentPlaySong = null;
+
+function togglePlay(nextPlaySong, nextBtn) {
+    if (currentPlaySong == nextPlaySong) {
+        // pause
+        currentPlayBtn.classList.replace("fa-pause", "fa-play");
+        currentPlaySong.pause();
+        currentPlayBtn = null;
+        currentPlaySong = null;
+        return;
+    } 
+   
+    if (currentPlaySong != null) {
+        // currently there is no music playing.
+        currentPlaySong.pause();
+        currentPlayBtn.classList.replace("fa-pause", "fa-play");
+    }
+    
+    // currenty there is music playing.
+    currentPlayBtn = nextBtn
+    currentPlaySong = nextPlaySong
+    nextBtn.classList.replace("fa-play", "fa-pause");
+    nextPlaySong.play();
+}
+
+
+function setProgressBar(e, playerProgressEl, song) {
+    const width = playerProgressEl.clientWidth;
+    const xValue = e.offsetX;
+    console.log(width);
+    console.log(xValue);
+    song.currentTime = (xValue / width) * song.duration;
+}
+
+function updateProgressBar(progressEl, durationEl, currentTimeEl, song) {
+    const { duration, currentTime } = song;
+    const ProgressPercent = (currentTime / duration) * 100;
+    progressEl.style.width = `${ProgressPercent}%`;
+    const formattime = (timeRanges) =>
+        String(Math.floor(timeRanges)).padStart(2, "0");
+    durationEl.textContent = `${formattime(duration / 60)} : ${formattime(
+        duration % 60,
+    )}`;
+    currentTimeEl.textContent = `${formattime(currentTime / 60)} : ${formattime(
+        currentTime % 60,
+    )}`;
+}
+