Author: Pedro

This tutorial shows how to style a WordPress audio player so that the cover art image spins (with CSS animation) when the audio player is displayed in your post.

⚠️ Requirement:
You must use a compatible audio player plugin (the original tutorial refers to “the Audio Player Plugin by Pedro” — a plugin that provides a customizable audio player with download button).

📌 Steps to Add CSS for Spinning Cover Art

1. Log in to your WordPress admin dashboard

2. Go to Appearance → Customize

3. Scroll down and click Additional CSS

4. Paste this CSS code:

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {

  background: #06801e;

}

.njl-music-widget .mejs-container {

  margin: 0 !important;

}
.njl-music-widget .artwork {

  display: block;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  float: left;

  top: 10px;

  line-height: 0;

  margin-right: 5px;

  margin-bottom: 15px;

  width: 100px;

  height: 100px;

  border-radius: 100px;

  border: 5px solid white;

  border-left-color: green;

  border-right-color: green;

  -webkit-animation: spin 3s linear infinite;

  animation: spin 3s linear infinite;

}
@keyframes spin {

  100% { transform: rotate(180deg); }

}
.njl-music-widget .details {

  display: block;

  overflow: hidden;

  margin-bottom: 10px;

  color: #fff;

  padding-top: 17px;

  padding-left: 100px;

}

5. Publish your changes

Now your audio player’s cover art (class .artwork) will continuously rotate using the spin animation.

🧠 How It Works

• The CSS targets the audio player’s container classes and styles the cover image.

• It uses a CSS animation (@keyframes spin) to rotate the image.

• You can edit colors, borders, and animation duration to fit your site design.

Downloading a music file instead of playing it in the browser

To make songs download instead of playing in browser, go to file manager. Edit .htaccess and add this code at the bottom.

<FilesMatch ".(?i:mp3)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
<FilesMatch ".(?i:mp4)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
<FilesMatch ".(?i:mpg)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
<FilesMatch ".(?i:mov)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
<FilesMatch ".(?i:flv)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>

A fast website is a must-have in today’s digital world. One effective way to improve your WordPress site’s performance is by offloading your media files. But what does this mean, and how can you do it? Let’s break it down.

What Is Media Offloading?​

Media offloading is the process of moving your website’s media files—like images, videos, and PDFs—to an external storage service. Instead of relying solely on your web host’s server, these files are stored and served from specialized cloud platforms. The result? A leaner, faster site.

Why Offload Media Files?​

Here are some compelling reasons to consider offloading:

1. Enhanced Speed
   External servers are optimized to handle large files, reducing the strain on your website’s hosting server. This means faster load times for your visitors.
2. Scalability
   Cloud storage grows with your website. Whether you’re uploading hundreds or thousands of files, these platforms can handle the load without compromising speed.
3. Cost Savings
   Reducing server load can let you opt for a cheaper hosting plan while storing your files securely in the cloud.
4. Backup and Reliability
   Most storage platforms provide robust backup solutions, adding an extra layer of security for your data.

How to Offload Media Files in WordPress​

Here’s a step-by-step guide to getting started:

1. Pick a Cloud Storage Service​

Popular options include Amazon S3, Google Cloud, and DigitalOcean Spaces. Choose one that fits your budget and technical requirements.

2. Install a Media Offloading Plugin​

Plugins like WP Offload Media make the process seamless. These tools integrate WordPress with your chosen cloud storage and automate file transfers.

3. Configure the Plugin​

Once installed, connect the plugin to your cloud storage account. You’ll typically need API credentials to link the two systems securely.

4. Migrate Existing Media​

The plugin will allow you to move your current media library to the cloud. This step might take some time, depending on your library’s size.

5. Test Your Setup​

Double-check that your files load correctly. Visit a few pages and confirm that images and videos appear without errors.

Pro Tips for a Smooth Transition​

• Backup First: Before making changes, ensure your site is backed up to avoid any mishaps.
• Monitor Performance: Regularly check page load speeds to confirm the offloading is working as expected.
• Update Plugins: Keep your offloading plugin and cloud credentials up to date for maximum security and compatibility.

Ready to Supercharge Your Website?​

Offloading media files is a simple yet effective way to make your WordPress site faster and more efficient. With cloud storage handling your large files, you can focus on delivering an exceptional experience for your visitors.

Start exploring plugins and cloud services today, and take the first step toward a faster, more scalable website.