Experience address: Blog, Github, NPM

preface

Music players on blogs, most of them small and identical, are tucked away in a corner of the page and allow people to listen to music while reading articles, adding to the satisfaction of certain experiences. I, on the other hand, did something quite different:

Isn’t that what blogs are for? Playing more music may even lower the quality of reading. Isn’t it good to just listen to music? Since to experience, that immersion experience is not good?

One day, I accidentally opened douban FM web page version, which is very consistent with douban’s feeling, clean and simple. Of course, there are many similar music playing online, which fosters what I will do later.

My blog was built with Vuepress, with the theme of vuepress-Reco. At first, I was looking for a plug-in for playing music, so I went to awesome- Vuepress and found only one plug-in related to music. Vuepress-plugin-music-bar plugin….. It is still a bar… A little lost. So, no one? That… Why don’t I try? The final result is the four images seen above: light/dark lyrics, light/dark visual decoding. After reading the plug-in API on vuepress’s official website, start working on it!

Open to

No matter how I draw the page, the original intention is to be an immersive experience. After looking for the general structure of many players, I still feel comfortable with the playing interface of NetEase Cloud. I have tried to draw the playing interface in my mind, but I still choose to use the effect of NetEase Cloud in the end (bring it to you) : The left side of the vinyl record scroll, the right side of the lyrics scroll, currently do not need to previous song next song, there is a play and share button, which looks like this:

After a day and a half in a hurry, NPM Link debugged successfully and sent out a version of the NPM package. Easy to use? To say. Does it work? Can!!!!

To optimize the

After doing this, the immersion feels a little bit, the experience? Is that a good experience? No, we still need to add something, like visualization.

Here special thanks to the NetEase Cloud big front end team for an article: The application of Web Audio in Audio visualization, basically according to look down, the literature inside also have a look, you can make the above effect. To be honest, the literature is really big…. Wavelength, sines and cosines, frequency domain, time domain, Nyquist’s theorem, and the fast Fourier transform, hair falling out secretly… By the way, attach a screenshot of a literature:

But you can do it without looking at these!

The basic idea is:

  1. createAudioContext, associated with audio input, decoding, control audio playback and pause
  2. createanalyserTo obtain the FrequencyData and TimeDomainData of the audio.
  3. Set the fast Fourier transform value, signal sample window size, range from 32 to 32768, default 2048
  4. Create an audio source, which is associated with a profiler, which is associated with an output device (headphones, speakers, etc.)
  5. Get the frequency array, format it, and userequestAnimationFramethroughcanvasdraw

These things above the article is very detailed, I do not say what layman.

Problems encountered

npm link

NPM link (resolve, resolve, resolve, etc.) does not have tripartite/quadripartite dependencies, so I did not notice that if you are developing NPM packages with other dependencies, you should add these dependencies to the package.json file of the main project. After debugging, remember that NPM unlink is disconnected.

interface

Originally wanted to use the NetEase cloud music NodeJS version API, but some things are not easy to find, such as I need song ID, cover and lyrics, but there is no song ID in the document to check the album ID (cover in the album ID), only a song details, but this interface, but also need to authenticate jump…. For the user, I don’t need to give the user this extra step, and it’s easy to make mistakes. So I changed an API: Paul API, this API can parse NetEase cloud songs are not so many, but the general enough, the only disadvantage is that the multi-frequency refresh will always pending, should be the back-end set IP frequency.

Since there are problems, why not use the interface? Trying to find an MP3 file to parse the lyrics and cover? Find a repository of JSMediatags that can parse ID3v2, MP4, FLAC, etc., but….. Isn’t that just adding trouble to the user? Need to find albums, lyrics, songs, artist information all in one of the audio source file…. If I were a user, I wouldn’t use it.

After going back and forth, we finally decided to upload the song to the user, and then upload a song ID, cover and lyrics interface, the song is uploaded to the source link, using the following method:

<MusicPlayer musicId="xxx" musicSrc="xxx.mp3" style="margin:0 auto">
Copy the code

I personally recommend either playing vuepress static resources, or creating a library of vuepress audio resources that is like a map bed for easy maintenance.

Later try to optimize it.

The theme color

Light and dark lines are adaptations for vuepress-Reco theme switching.

At the end

Inspired by Douban FM, the structure refers to Haoshen’s music player, visual playback refers to the application of Web Audio in Audio visualization, interface thanks to Paul API, so I seem to have done nothing…..

The plugin has been shipped as NPM package and awesome-vuepress has been included in the repository. There may be some minor issues with the experience, which will be fixed gradually. Everyone can also make suggestions, can listen to count me lose!

The project is written in a hurry, I hope I can do something more profound — to myself.