A MUST READ ARTICLE. It discusses adding js files as audio player with customerized CSS. I think with these two skills, you can implement anything on Hexo blog. With an exception to reaching users from mainland China, though it’s not a technical issue…

Day 22 with Hexo: In the past 7 days, I have been struggling with non-technical issues with my blog. Trying to make this blog accessible to mainland China and of course the rest of the world seems to be MISSION IMPOSSIBLE. NO politics here, but it is really hard and time consuming meaninglessly!!! The popular cloud services like GoogleDrive, OneDrive, Dropbox etc. are blocked in China. Fine, I can use Chinese cloud service. I found a Chinese cloud service based in Shanghai China with good online reviews. To my surprise, in order to register an account, you need a Chinese mobile phone number which is now commonly required for most of Chinese websites. I can still find a way around it through my freinds in China, right? Then the second step is asking you to upload front and back pictures of your CHINESE NATIONAL ID?!?! I had to say I SURRENDER at this step.

To my friends and family in China,

I reach to you
I know you can feel it too
We’d make it through

I SURRENDER by Celine Dion

No pictures and songs for you.

At the moment of writing this post, the following are tried and failed:

Google Drive, OneDrive and Dropbox are all blocked in China.
Baidu pan stopped providing the public share external link.
Weibo by Sina was used by many Chinese bloggers as their image hosting site. After 7 years, it stopped this service in late April, 2019. Thank you, I don’t even need to try the painful registration process.
Qiniu, hey, I was rejected as its customer. No comments here…

I may find a way later. But let’s move on!

Theme Song of Today

It’s another sad failure of my Hexo journey. Maybe it’s my problem but I can’t make the popular Hexo audio plugin (hexo-tag-aplayer) working on my blog. No wonder of course, it does not support my Dropbox link for songs and most of popular Chinese music websites do NOT work overseas. And I don’t want use local assests since Github has limited page limits. OK, yes, you can also blame that I am using FREE services now. I guess MONEY can solve most of my problems.

So my audio player looks something below:

I Surrender

Celine Dion

Another Uncommon Hexo Approach

Simpliest appraoch for audio player is just use the HTML

iframe can be another option as well.

With some googling, the one adpoted here is a customerized audio player I found online with very little changes of the CSS. So it will envolve adding customerized CSS & JavaScript under HEXO. The scripts can be found here.

Step 1: Prepare the CSS in Hexo. For the content, copy and paste from the above script link into your new CSS file to be used. In terms of adding CSS under Hexo, please refer to the process described in my previous post on LeafLet Map.

Step 2: Add JavaScript to Hexo

2.1 copy paste the content of the source script and save it as yourAudioPlayer.js under yourBlog\themes\next\source\js

$(
  function(){
  var aud = $('audio')[0];
  $('.play-pause').on('click', function(){
  if (aud.paused) {
    aud.play();
    $('.play-pause').removeClass('icon-play');
    $('.play-pause').addClass('icon-stop');
  }
  else {
    aud.pause();
    $('.play-pause').removeClass('icon-stop');
    $('.play-pause').addClass('icon-play');
  }

})
  $('.next').on('click', function(){
  aud.src = 'another audio source';
})
  aud.ontimeupdate = function(){
    $('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
  }
})

2.2 Open _layout.swig from the yourBlog\themes\next\layout

1	<script type="text/javascript" src="/js/lanAudioPlayer.js"></script>

2.3 Add the song & player in the post (markdown)

<audio src= 'yourMP3 URL'></audio>
<div class='player'>
  <img src='the ablum pic --> Optional'/>
  <div class='info'>
    <div class='name'>Name of the Song</div>
    <div class='singer'>Singer</div>
  </div>
  <div class='btns'>
    <div class="iconfont play-pause icon-play"></div>
    <div class="iconfont next icon-next"></div>
  </div>
  <div class='progress'>
  </div>
</div>

2.4 Deploy and Enjoy the music

Summary

Looking back at how I implemented the audio player, it is actually fairly simple. However, I felt it really took a long time for me to add this feature. What I can say is that probably 5% of the time was spent on learning and try-N-Error scripting and the rest of the time were mostly wasted on meaningless issues of connecting China and the world based on FREE services.