あなたのウェブサイトに無料のMP3プレーヤーを埋め込む方法:3つの方法

あなたのウェブサイトに無料のMP3プレーヤーを埋め込む方法:3つの方法

Webサイトの訪問者にMP3ファイルを楽しんでもらいたい場合、これを行う最も簡単な方法の1つは、それをページに埋め込むことです。埋め込みMP3プレーヤーを使用すると、インラインで再生されるため、訪問者はオーディオを直接ダウンロードしたり、追加のソフトウェアを使用したりする必要がありません。





HTML5やGoogleドライブの使用など、ウェブサイトにMP3を埋め込むために使用できるさまざまな方法について詳しく説明します。





1.HTML5を使用してWebサイトにMP3を埋め込みます

Webサイトのコードを編集することに慣れている場合、MP3ファイルを埋め込む最も簡単な方法の1つは、HTML5を使用することです。





HTML5 タグは一見基本的に見えるかもしれませんが、すべての主要なデスクトップおよびモバイルブラウザと互換性があるため強力です。

MP3をHTML5に埋め込むには、次のコードを使用します。



Your browser does not support the audio tag.

単に交換する MP3URLはこちら アップロードしたオーディオファイルで。これは、コンピューターに保存されているファイルにすることはできません。オンラインで入手できる必要があります。

アプリをextsdカードに移動する方法

このコードは、ユーザーが再生、一時停止、スクラブ、および音量調整を行うことができる小さなオーディオプレーヤーをページに配置します。 Firefoxでの表示は次のとおりです。





このコードには、ユーザーのブラウザがプレーヤーをサポートしていないというまれな状況で、メディアプレーヤーの代わりに表示されるメッセージも含まれています。

次のような属性を適用できます 自動再生ループ 、 そのようです:





Your browser does not support the audio tag.

オーディオをユーザーに自動的に強制することは悪い習慣であると考えられているため、ほとんどのブラウザーは自動再生をサポートしないことに注意してください。

基本的なカスタマイズは、CSSを介してオーディオプレーヤーブロックに適用できます。 国境パディング 。ただし、JavaScriptを使用してプレーヤー自体のスタイルを適切に設定し、ブラウザー間で一貫性を保つ必要があります。

HTML5オーディオプレーヤーの属性とカスタマイズの詳細については、次のURLをご覧ください。 MDN Web Docs

グーグルマップにピンを置く方法

関連している: 誰でも自分のWebサイトに追加できるクールなHTML効果

2.Googleドライブを使用してWebサイトにMP3を埋め込みます

Googleドライブは 優れた無料のクラウドストレージプロバイダー 。これを使用して、MP3ファイルをアップロードし、オーディオプレーヤーを作成できます。

MP3をGoogleドライブにアップロードした場合:

  1. 右クリック ファイルをクリックします リンクを取得
  2. アクセシビリティ制限をに変更します リンクを持っている人
  3. 最後に、をクリックします リンクをコピーする

これにより、次のようなURLが表示されます。

https://drive.google.com/file/d/123/view?usp=sharing

交換 ビュー?usp =共有プレビュー 、 そのようです:

https://drive.google.com/file/d/123/preview

次に、

属性を調整、追加、または削除できます( 枠線 ) 必要に応じて。

これにより、Googleドライブプレーヤーを使用してウェブサイトにMP3が埋め込まれます。ユーザーは、HTML5プレーヤーと同じように、再生、スクラブ、音量の調整を行うことができます。外観は次のとおりです。

主な違いは、 飛び出る ボタン。これにより、ユーザーがコメントを追加したり、ファイルを共有したりできるGoogleドライブでMP3が開きます。

3.CMSを使用してWebサイトにMP3を埋め込みます

Webサイトにコンテンツ管理システム(CMS)を使用している場合でも、上記の方法を使用できる可能性があります。そうは言っても、HTMLコードの編集に慣れていないかもしれません。

仮想メモリウィンドウを変更する方法10

優れたCMSを使用すると、インターフェイスを介してWebサイトにオーディオを簡単に追加できます。たとえば、WordPressでは、次のことを行うだけです。 ブロックを追加する 、 選択する オーディオ 、そしてどちらか アップロード MP3、あなたからそれを選択してください メディアライブラリ 、 また URLから挿入

Googleサイト、ExpressionEngine、Squarespaceなどのサービスのいずれを使用している場合でも、音声を追加するプロセスは少し異なります。完全なガイダンスについては、会社のヘルプドキュメントを参照してください。

訪問者にMP3を簡単に聴かせましょう

上記の方法のいずれかを使用すると、Webサイトの訪問者はメディアプレーヤーを介してMP3ファイルを簡単に聞くことができるようになります。

とはいえ、必ずしもMP3ファイルを使用する必要はありません。 WAVやFLACなど、他にも多くの一般的なオーディオ形式があり、Webサイトで同じようにインラインで再生できます。

共有 共有 つぶやき Eメール 最も一般的な10のオーディオ形式:どれを使用する必要がありますか?

MP3については知っていますが、AAC、FLAC、OGG、またはWMAについてはどうでしょうか。なぜこれほど多くのオーディオファイル形式が存在し、最高のオーディオ形式があるのですか?

次を読む
関連トピック
  • インターネット
  • ウェブ開発
  • ウェブマスターツール
  • HTML5
著者について ジョーキーリー(652件の記事が公開されました)

ジョーはキーボードを手に持って生まれ、すぐにテクノロジーについて書き始めました。彼はビジネスの学士号(優等学位)を取得しており、現在はフルタイムのフリーランスライターであり、誰にとってもテクノロジーをシンプルにすることを楽しんでいます。

ジョーキーリーからもっと

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください