Nội dung tiếp thịCông cụ tiếp thị

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

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 rằng, nếu bạn biết vị trí tệp của mình, việc nhúng nó vào một bài đăng trên blog khá đơn giản. WordPress có trình phát âm thanh HTML5 riêng được tích hợp trực tiếp vào đó để 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ỉ cần dán đường dẫn tệp âm thanh và trình chỉnh sửa thực sự đã tạo 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 các 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ọ có 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 từ 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 nên bạn có thể trang trí 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ộ: Martech Zone đang sử dụng các liên kết liên kết cho các plugin trên bao gồm 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.

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.