WordPress:ブログ投稿にMP3プレーヤーを埋め込む

WordPressでブログ投稿MP3プレーヤー

ポッドキャスティングと音楽共有がオンラインで非常に普及しているため、ブログ投稿にオーディオを埋め込むことで、サイトでの訪問者のエクスペリエンスを向上させる絶好の機会があります。 ありがたいことに、WordPressは他のメディアタイプを埋め込むためのサポートを進化させ続けています–そして mp3 ファイルは簡単に実行できるもののXNUMXつです。

最近のインタビューのためにプレーヤーを表示することは素晴らしいことですが、実際のオーディオファイルをホストすることはお勧めできません。 WordPressサイトのほとんどのウェブホストはストリーミングメディア用に最適化されていないため、帯域幅の使用量が制限されたり、オーディオが完全に停止したりする問題が発生し始めても驚かないでください。 実際のオーディオファイルをオーディオストリーミングサービスまたはポッドキャストホスティングエンジンでホストすることをお勧めします。 そして…ホストがSSL(https://パス)をサポートしていることを確認してください…安全にホストされているブログは、他の場所で安全にホストされていないオーディオファイルを再生しません。

そうは言っても、ファイルの場所がわかっていれば、ブログ投稿に埋め込むのは非常に簡単です。 WordPressには独自のHTML5オーディオプレーヤーが直接組み込まれているため、ショートコードを使用してプレーヤーを表示できます。

これが私が最近行ったポッドキャストエピソードの例です:

WordPressのGutenbergエディターの最新のイテレーションで、オーディオファイルパスを貼り付けたところ、エディターが実際にショートコードを作成しました。 実際のショートコードは次のとおりです。ここで、srcを再生するファイルの完全なURLに置き換えます。

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

WordPressは、mp3、m4a、ogg、wav、およびwmaファイルタイプをサポートしています。 どちらか一方をサポートしていないブラウザを使用している訪問者がいる場合にフォールバックを提供するショートコードを作成することもできます。

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

他のオプションを使用して、ショートコードを拡張することもできます。

  • loop –オーディオをループするためのオプション。
  • 自動再生–ファイルがロードされるとすぐに自動的に再生するためのオプション。
  • プリロード–オーディオファイルをページとともにプリロードするオプション。

すべてをまとめると、次のようになります。

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

WordPressのオーディオプレイリスト

プレイリストが必要な場合、WordPressは現在、再生する各ファイルの外部ホスティングをサポートしていませんが、オーディオファイルを内部でホストしている場合はサポートしています。

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

ニキビ後の跡が目立たないよう設計されており、さらにより少ない処方で効果的なものは いくつかの解決策 子テーマに追加して、外部オーディオファイルの読み込みを有効にすることができます。

ポッドキャストRSSフィードをサイドバーに追加する

WordPressプレーヤーを使用して、ポッドキャストをサイドバーウィジェットに自動的に表示するプラグインを作成しました。 あなたはできる ここでそれについて読む プラグインをダウンロードする WordPressリポジトリから。

WordPressオーディオプレーヤーのカスタマイズ

私自身のサイトでわかるように、MP3プレーヤーはWordPressではかなり基本的です。 ただし、HTML5であるため、CSSを使用してかなりドレスアップできます。 CSSIgniterは、 オーディオプレーヤーのカスタマイズ したがって、ここですべてを繰り返すことはしませんが、カスタマイズできるオプションは次のとおりです。

/* 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;
}

WordPressMP3プレーヤーを強化する

いくつかの絶対に素晴らしいオーディオプレーヤーでMP3オーディオを表示するためのいくつかの有料プラグインもあります:

開示:上記のプラグインのアフィリエイトリンクを使用しています Codecanyon、十分にサポートされたプラグインと卓越したサービスとサポートを備えた素晴らしいプラグインサイト。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.