WordPress: Nhúng Trình phát MP3 vào Bài đăng trên Blog của bạn

Bài đăng trên blog Máy nghe nhạc MP3 với WordPress

Với tính năng podcasting và chia sẻ âm nhạc trực tuyến rất phổ biến, có một cơ hội tuyệt vời để nâng cao trải nghiệm của khách truy cập trên trang web của bạn bằng cách nhúng âm thanh vào các bài đăng trên blog của bạn. Rất may, WordPress tiếp tục phát triển hỗ trợ nhúng các loại phương tiện khác - và mp3 tập tin là một trong những tập tin dễ thực hiện!

Mặc dù hiển thị một trình phát cho một cuộc phỏng vấn gần đây là rất tốt, nhưng việc lưu trữ tệp âm thanh thực tế có thể không được khuyến khích. Hầu hết các máy chủ web cho các trang web WordPress không được tối ưu hóa cho phương tiện truyền phát trực tuyến - vì vậy đừng ngạc nhiên nếu bạn bắt đầu gặp phải một số vấn đề trong đó bạn đạt đến giới hạn về việc sử dụng băng thông hoặc âm thanh của bạn bị chặn hoàn toàn. Tôi khuyên bạn nên lưu trữ tệp âm thanh thực tế trên dịch vụ phát trực tuyến âm thanh hoặc công cụ lưu trữ podcast. Và… hãy đảm bảo rằng máy chủ của bạn hỗ trợ SSL (đường dẫn https: //)… blog được lưu trữ an toàn sẽ không phát tệp âm thanh không được lưu trữ an toàn ở nơi khác.

Điều đó nói lên rằng bạn biết vị trí của tệp của mình, việc nhúng nó vào một bài đăng blog khá đơn giản. WordPress có trình phát âm thanh HTML5 của riêng mình được tích hợp trực tiếp vào nó nên bạn có thể sử dụng mã ngắn để hiển thị trình phát.

Đây là một ví dụ từ một tập podcast gần đây mà tôi đã làm:

Với phiên bản mới nhất của trình chỉnh sửa Gutenberg trong WordPress, tôi chỉ dán đường dẫn tệp âm thanh và trình chỉnh sửa đã thực sự tạo ra mã ngắn. Mã ngắn thực tế theo sau, nơi bạn sẽ thay thế src bằng URL đầy đủ của tệp bạn muốn phát.

[audio src="audio-source.mp3"]

WordPress hỗ trợ các loại tệp mp3, m4a, ogg, wav và wma. Bạn thậm chí có thể có một mã ngắn cung cấp dự phòng trong trường hợp bạn có khách truy cập sử dụng trình duyệt không hỗ trợ trình duyệt này hoặc trình duyệt khác:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

Bạn cũng có thể nâng cao mã ngắn bằng các tùy chọn khác:

  • loop - một tùy chọn để lặp lại âm thanh.
  • autoplay - một tùy chọn để tự động phát tệp ngay khi nó tải.
  • tải trước - một tùy chọn để tải trước tệp âm thanh với trang.

Đặt tất cả lại với nhau và đây là những gì bạn nhận được:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

Danh sách phát âm thanh trong WordPress

Nếu bạn muốn có một danh sách phát, WordPress hiện không hỗ trợ lưu trữ bên ngoài cho từng tệp của bạn để phát, nhưng họ cung cấp nếu bạn đang lưu trữ các tệp âm thanh của mình trong nội bộ:

[playlist ids="123,456,789"]

một số giải pháp ngoài đó bạn có thể thêm vào Chủ đề con của mình để cho phép tải tệp âm thanh bên ngoài.

Thêm Nguồn cấp RSS Podcast của bạn vào Thanh bên của bạn

Sử dụng trình phát WordPress, tôi đã viết một plugin để hiển thị podcast của bạn tự động trong tiện ích thanh bên. Bạn có thể đọc về nó ở đâytải xuống plugin từ kho lưu trữ WordPress.

Tùy chỉnh Trình phát âm thanh WordPress

Như bạn có thể thấy trên trang web của riêng tôi, trình phát MP3 khá cơ bản trong WordPress. Tuy nhiên, vì nó là HTML5, bạn có thể chỉnh sửa nó khá nhiều bằng cách sử dụng CSS. CSSIgniter đã viết một hướng dẫn tuyệt vời về tùy chỉnh trình phát âm thanh vì vậy tôi sẽ không lặp lại tất cả ở đây… nhưng đây là các tùy chọn bạn có thể tùy chỉnh:

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
.mytheme-mejs-container .mejs-button > button {
  background-image: url("images/mejs-controls-dark.svg");
}

.mytheme-mejs-container .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
  height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
  top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
  margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
  top: 19px;
}

Nâng cao trình phát MP3 WordPress của bạn

Ngoài ra còn có một số plugin trả phí để hiển thị âm thanh MP3 của bạn trong một số trình phát âm thanh tuyệt đẹp:

Tiết lộ: Tôi đang sử dụng các liên kết liên kết của mình cho các plugin trên qua Codecanyon, một trang web plugin tuyệt vời có các plugin được hỗ trợ tốt cũng như dịch vụ và hỗ trợ xuất sắc.

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.