Two Ways to Embed Music Players in WordPress Without Plugins
A friend recently asked how to insert a music player in WordPress without using plugins. The methods are quite simple, and I'd like to share two approaches: one using HTML5 tags and the other using the repost feature provided by Xiami Music.
1. Implementation Using HTML5 Tags
To date, there is still no standard for playing audio on the web. Most audio is currently played via plugins like Flash. However, not all browsers support the same plugins. HTML5 defines a standard method for including audio through the <audio> element, which can play sound files or audio streams.
1.1 Obtain a Playable URL
If links found online are unreliable, you can generate your own using Qiniu Cloud Storage. If you don't have an account, please register here.
1.2 Create a Bucket and Upload Music
Create a new bucket (space) in Qiniu and upload your local music file to it. This will automatically generate a URL that you can copy.
Qiniu File Management
Qiniu Cloud URL Generation
1.3 Use the Audio Tag
Once you have the music link, you can use it with the <audio> tag. Switch to the text mode when writing your post and paste the following code. For detailed usage of the audio tag, check the W3C manual.
<audio src="http://musicbox.qiniudn.com/2014%2F03%2Ftiangaodihou.mp3" controls="controls">
</audio>
1.4 Advantages and Limitations
The URL generated by this method is fully customizable, allowing you to insert it anywhere, including QQ Space background music. Qiniu Cloud has multiple CDN nodes, ensuring fast loading speeds. The only drawback is that new users must complete real-name authentication to use the service, which is a measure to prevent abuse.
1.5 Demo Effect
Here is a demonstration of the audio element in action:
2. Xiami Music Repost
2.1 Login and Search
Since Xiami Music was acquired by Alibaba, you can now log in using your Taobao account. Search for a song you like, add it to your music library, and click the "More" option, then select "Repost to other websites."
Xiami Music
2.2 Copy and Paste HTML Code
In the pop-up repost box, copy the HTML code and paste it into your WordPress post (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>
2.3 Demo Effect
Here is the final result:
Summary: The link generated by Xiami Music is aesthetically pleasing and convenient, but it lacks customization features. For instance, if you need to upload your own recorded English speeches, you can use Qiniu Cloud Storage to generate external links. This method allows you to insert audio into any webpage you desire.