IRORIBATA

使い方

音声・動画ファイルの挿入

2023年1月5日
音声ファイルや動画ファイルなどのマルチメディア関係についてはファイルのフォーマットや使うブラウザとの関係でたいへん難しい点がありますが、代表的なmp3,mp4ファイルについてはなんとか再生ができます。

写真の挿入欄からは、実を言うと写真以外のものも入れられます。
.txtや.pdfはもとより、マルチメディアファイルとして音声ファイル.mp3や動画ファイル.mp4などです。
ただしマルチメディア関係の各種ファイルは次のような制限や問題があります。
(1)ちゃんと再生、表示されるかどうかはブラウザ任せです。
 昔はMediaPlayerとかRealPlayerとかの再生ソフトをインストールしていないと表示されませんでした。
 最近のブラウザは最低限の表示機能は持っているものが多く通常.mp3や.mp4はOKのようです。
 FlushPlayerのファイルは今はもう再生できないようです。
(2)オーディオ、ビデオファイルは容量が大きくなりがちですが、どこまでの容量ならOKかはサーバーの設定次第で一概には言えません。今は100MB位はだいじょうぶそうですが。
(3)レンタルサーバーではセキュリティー上実行可能ファイルはおそらく許可されておらず入れられません。
(4)ブラウザ,あるいはブラウザの設定によっては表示せずダウンロードが選択される時もあります。
(5)元のページに戻るにはブラウザの戻る、あるいは閉じるボタンの操作が必要になる場合があります。
(6)ブラウザによって表示のされ方が大きく異なる場合があります。

試しに今たまたま見聞きしていたYouTubeの音声ファイルや動画ファイルを入れてみます。
（ファイルはYouTubeより無断ダウンロードしました。）

オーディオファイル mp3
音声ファイル .mp3 : ペールギュント組曲よりソルヴェイグの歌
(本当は動画なのですが音声部分だけを入れてみました。)
出典 YouTube: https://www.youtube.com/watch?v=JyQ9lbgZDpQg

画像と同じようにただ単に表示させた場合、
←左のアイコンをクリックすれば最近のブラウザなら特にマルチメディア再生用プレイヤーを入れていなくても多分再生されます。でも画像がありませんので表示窓に音声コントロールが表示されるだけで少し大げさですし、聞いている間は他のページを見れませんし、戻るのも面倒。
聞き終わったあとは面倒でもブラウザの「戻る」ボタンでお戻りください。
※いきなり再生するかもしれませんのでお気をつけください。(なぜか制御できません。)

<audio>タグを使ってインライン要素として入れる方法もあります。先程のよりは少しましです。

ソルヴェイグの歌

　（音量設定を確認後▶をクリックして再生してください）
…Download audio

コードは
ソルヴェイグの歌
<audio controls src="ファイルパス"></audio>
　（音量設定を確認後▶をクリックして再生してください）
…<a href="ファイルパス"\ download>Download audio</a>

ページの頭にでも入れておけば聞きながらそのページを読むことはできます。
でも残念ながら演奏させておいて他のページに切り替えるのはできません。
   (いちいち新しいウィンドウかタブで開いていけばいいんだけどめんどうだし。)

いろいろ試して最終的に別窓にjavascriptでplayerを定義して表示再生させることにしました。
コントロールだけで何もないと寂しいので解説や歌詞なども入れてみます。
自動再生はしません。▶をクリックすると再生します。
  →  ペールギュント組曲よりソルヴェイグの歌 （謹製別窓にて再生）
これだと音楽を聞きながら他のページを見れますし操作もしやすいという利点があります。
なんと呼び出したこちらのウインドウを切り替えたりあるいは消しても曲は続いています。

説明なども入りますし、これがいいかな...。動画再生も検討して決めよう。

動画ファイル mp4
動画ファイル .mp4 : サンスクリット語般若心経
出典 YouTube: https://www.youtube.com/watch?v=9Hb9LEseL9M

写真と同じようにそのまま表示させてみます。
←動画の場合はコンテンツ窓でも特におかしくはありません。
ましてお経ともなるとそれだけでありがたいものです。
※いきなり再生するかもしれませんのでお気をつけください。(なぜか制御できません。)

ただ再生している間はこのページからは離れられません。音楽アルバムなど音に主体がある場合は少し残念です。ブラウザの「戻る」ボタンでお戻りください。

インライン表示もやりたければできます。 → ためしに

オーディオと同様に別窓再生してみます。
　→  サンスクリット語般若心経 （謹製別窓にて再生）
別窓の場合は音だけ聞きながら他のページを見れます。
長いお経や音声主体の音楽アルバム等では具合がいいです。
また好きなときに必要な操作がしやすいので使いやすいです。

先程のは動画のバックが黒だったのでうまく画面と馴染んでいましたが、白系統の場合はこうなります。
　→  みんなのうた「天使のパンツ」 （謹製別窓にて再生）

このような動画を見て、何事にも動ぜぬよう、日々修行をしているのでした。
　　.... ときにyoutubeの動画パクったけどごめん！

...結局動画についてもオーディオと同じ話で、再生用別窓がいいという結論に至りました。

... ということで、結局、
.mp3(オーディオ) および .mp4(ビデオ) については共通化して、
<a href='javascript:avplayer("ファイルパス", width, height, "タイトル");'>リンク名</a>
で別窓で再生されるようになっています。
"ファイルパス"は音声または動画ファイルのパス、width, heightはウインドウ(内部)の大きさ、"タイトル"は画面上方に表示するタイトルですが動画では１行以内がいいです(複数行だと画像と重なり見苦しくなるブラウザあり)。いちいちブラウザ判定をして合わせてやる気もありません。
音声ファイルだと画像がない分多く入れてもだいじょうぶです。歌詞などが入れられます。

avplayer()の基本的な仕掛けは、window.open()で別窓をつくり、<video>タグを設置してファイルのURLを設定し、再生はブラウザにお任せです。
当初オーディオ、ビデオ用に各々<audio>タグ、<video>タグを使う必要があるかと考えていましたが、<video>タグでオーディオも再生できるとのMDNの解説があり、実際問題なく再生できましたので<video>タグのみで共通化しました。
(逆に<audio>で動画を再生すると音は出ますが画像は表示されませんでした。)

さらに使いやすいようにするには写真と同様にマルチメディア用編集窓でもつくればいいのかもしれないけど、さほど使わないのでそこまではやりません。

ファイル形式については.mp3, .mp4以外のファイルについてはよくわかりません。
ブラウザによると思われ、私のFirefoxでは
   .wav(音声格納ファイル) は普通の表示ではダウンロード、avplayerでは再生できました。
   .AVI(Windows動画ファイル), .wmv(windows media video) は普通の表示ではダウンロード、
    avplayerではサポートされてないの表示です。

IRORIBATAでマルチメディア関係を扱うならばもっと気合いを入れて処理系をつくる必要があります。
これ以上やる気はありませんけど。