A friend asked me a few days ago how to insert a music player in WordPress without using plugins. There are two simple methods to achieve this: using HTML5 tags or using the reposting feature provided by Xiami Music.

Method 1: Using HTML5 Tags

Until now, there is still no standard for playing audio on web pages. Most audio is played using plugins like Flash. However, not all browsers have the same plugins. HTML5 specifies a standard way to include audio using the audio element. The audio element can play sound files or audio streams.

To use the audio tag, we need a URL link for the audio. If the ones found online are not reliable, we can generate our own using Qiniu Cloud Storage. If you don't have an account yet, you can sign up for one.

After creating a new bucket in Qiniu, upload your music files to the bucket. This will automatically generate a URL. Here is a screenshot:

Once you have the music link, you can use it with the audio tag. Switch to the text mode when writing the article and paste the following code:

<audio src="http://musicbox.qiniudn.com/2014%2F03%2Ftiangaodihou.mp3" controls="controls">
</audio>

The URL generated by this method can be inserted anywhere you want, including QQ space background music. Qiniu Cloud has multiple CDN nodes, so speed is not an issue. The downside is that new users need to go through real-name authentication before they can use it, but this is a measure to prevent abuse.

Here is a demonstration of using the audio element:

<audio src="http://musicbox.qiniudn.com/2014%2F03%2Ftiangaodihou.mp3" controls="controls">
</audio>

Method 2: Xiami Reposting

Since Xiami Music was acquired by Alibaba, you can directly use your Taobao account to log in to Xiami. Then, search for a song you like and add it to your music library. Click on the "more" option and select "repost to other websites".

In the reposting window that pops up, copy the HTML code and paste it into your WordPress article (in text mode).

<embed src="http://www.xiami.com/widget/0_1772319353/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>

Finally, let's see how it looks:

<embed src="http://www.xiami.com/widget/0_1772319353/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>

Summary: Using Xiami-generated links is convenient and visually appealing. However, the customization options are limited. For example, some websites may require uploading self-recorded English speaking content. In such cases, we can use Qiniu Cloud Storage to generate our own links and insert them into any web page we want.