このＨＰ上で音楽を鳴らすには
［目 次］(青色文字の項目にはリンクが貼られています)
＊＊＊
このホームページ(HP)はJimdoクリエイター無料版で作成しています。
私は趣味でマンドリンを弾きますのでHPの内容もマンドリンはじめ音楽関係の記事が多く、従ってHP上で音楽を鳴らせたいのですが残念なことにこの無料版HPにはmp3やwavといった音楽ファイルをアップロードして鳴らすことができません。
無理にアップロードしようとすれば
｢JimdoFreeでアップロードできるファイル形式（最大10MB)：PDF, GIF, JPEG, PNG, SVG, CSS, JS, EOT, TTF, WOFF
その他のファイル形式（最大100MB）をアップロードしたいですか？
Pro プランまたは Business プランにアップグレード｣
と表示されて有料プランに誘導されてしまいます。
HPにYouTubeは簡単に載せることができますので、すぐ思いつくことは音楽ファイルをひとまずYouTubeにアップロードして、そのYouTubeをHPに移し載せることでHP上で音楽を鳴らすことができることになります。
しかしこの方法ではYouTubeを仲介するため二度手間ですし、動画であれ静止画であれYouTube用に余計な画像まで作成しなくてはなりませんのでとにかく面倒です。
HP上で音楽を鳴らす私のイメージは小型のmp3音楽プレイヤーをHPに埋め込んでおき、HPを閲覧した人がこのプレイヤーの再生ボタンをクリックすることで音楽が流れ出すようにできないかということです。
リンクを張ってHP外の別窓に飛んで鳴らすのではなくあくまでこのHP上で完結させたいのです。
ネットを探しますとMP3 Playerとかaudio.js、JW Playerなど格好いいフリーの音楽プレイヤーがありますが、Jimdoではhttps://から始まるURLしか受け付けないためこれらmp3プレイヤーソフトをダウンロードできません。
http://のURLを入力しようとすれば「コードの一部がhttpsに準拠していません」とエラーメッセージが表示されてそこから先に進むことができなくなります。
従ってHPで音楽を鳴らすには
・音楽プレイヤーをどうやってHPに埋め込むか
・音楽ファイルのアップロードをどうするか
という二つの難題をクリアしなければなりません。
悪戦苦闘しましたが、HTML5<audio>タグとオンラインストレージのdropboxを組み合わせることでなんとか解決することができました。
以下の内容は私のブログ｢QAZのつれづれ日記｣の下記記事を編集してまとめた奮闘記であり備忘録です。
OSはWin10(64bit)、ブラウザはGoogle Chrome、Microsoft IE11/Edgeを前提にしています。
［ブログ記事］
・ホームページ、ブログ、メールへの動画、音声の載せ方(2017.01.23)
・Jimdoホームページにプレイヤーを埋め込んで鳴らす方法(１／２)
(2017.02.04)
・Jimdoホームページにプレイヤーを埋め込んで鳴らす方法(２／２)
(2017.02.11)
・Jimdoホームページで音楽プレイヤーに異変が・・・(2018.03.10)
・Chrome上のホームページで音楽が自動再生しなくなった！(2019.08.19)
・HP上での音楽の再生(2020.04.28)
HTML5<audio>タグを使用すればmp3プレイヤーソフトを使うことなく何と
ブラウザが下のようなスキンデザインのmp3プレイヤーを勝手にHPに埋め込んでくれます。
私にとってこのタグは救世主のような有難い存在ですが、後述のとおり融通の利かない面もあります。
Chrome、Edge
IE11
Edgeのデザインは以前は同じMicrosoftのIE11と一緒でしたがいつの間にかGoogle Chromeのデザインに変わってしまっています。
Chrome、Edgeのプレイヤーは大きくてデザインもあまり好きではありませんが変えることはできません。
タグの基本形は
<audio src="○○○" controls></audio>
たったこれだけです。
これを編集画面のウィジェット/HTMLのところに書き込めばOKです。
○○○はmp3音源をアップロードした先のURLです。
このURLも当然http://ではだめでhttps://から始まらなくてはなりません。
ネット上にmp3ファイルを倉庫代わりの保存用に貸してくれる無料サーバーなんて探してもそうそうありません。
そこで思いつくことはオンラインストレージサービスを利用できないかということです。
ネット上にはDropbox、OneDrive、Yahooボックス、Box、Google Driveなどのオンラインストレージサービスが紹介されています。
その中でDropboxのpublicフォルダを使えばJimdoで音声を公開できますという記事が数多く紹介されています。
現在Dropboxのpublicフォルダは廃止されていますのでこの情報は古いですが、publicホルダを介してのDropboxとJimdoの連携ができなくなっただけでDropboxを使ってJimdoで音声を公開すること自体は今も可能です。
そこでDropbox を使用することとし、Dropboxにmp3ファイルをアップロードして｢共有｣でファイルが保存されているURLアドレスを表示させます。
このときURLの最後?dl=0を?dl=1に書き換えます。
?dl=1はクリエパラメータと呼ばれるもののようですがなぜ?dl=0を?dl=1にするのかどこにも詳しい説明がありませんので私にはよくわかりません。
とにかくこれでうまくゆきますのでまああまり深く考えないで先に進むことにします。
Jimdoに埋め込むHTMLの記述は
<audio src="https://www.dropbox.com/△△△.mp3?dl=1"
controls></audio>
となります。
△△△はmp3音楽ファイルのファイル名です。
以上で取りあえずはプレイヤーを埋め込んで鳴らすところまでは到達しましたが最後の仕上げとして
(1) トップページのプレイヤーはページを開くと自動的に鳴り出すようにした
い
(2) 曲が終わるとまた曲の初めに戻って自動で繰り返し鳴るようにしたい
(3) デフォルトではプレイヤーは左寄せで表示されますのでこれを中央にもっ
てゆきたい
(4) トップページではHP来訪者が、トップページ以外では再生ボタンを押した
人がびっくりしないようあらかじめ音量を絞っておきたい
(5) プレイヤーのスキンはブラウザごと異なりますがどれもデザインが大き過
ぎて不格好ですので縦横同一比でスキンを縮小して恰好良く表示したい
このように仕上げにやりたいことはいろいろありますが、やり方をまとめて要領良く解説してくれているようなそんな具合のいいサイトはあるはずもなく、一つ一つ地道にやり方を調べました。
特に(4)と(5)の解決には難渋しました。
HTML、Java Script、CSSの住み分け原則はHTMLが構造の記述、JavaScriptが動的処理の記述、CSSが装飾の記述とされます。
厳密に住み分けが規定されているわけではなくかなりオーバーラップしているようですが、きちっと記述法を勉強しているわけではありませんのでどれを使うのが適正なのかうまく説明できません。
なおブラウザがIEの場合ウィジェット/HTMLの箇所にコピペしようと思ってもうまく張り付きませんのでCtrl＋Ｖを使って貼り付けます(ヘッダー編集の部分はコピペが可能です)。
Jimdoの不具合であり改善が求められます。
当初上記設定でうまくいっていたのですがHP作成のやっかいなところはJimdo HPの仕様、プラウザの仕様、Dropboxの仕様等の変更により今までうまくいっていたことがうまくいかなくなるということが往々にして発生しメンテナンスの欠かせないことです。
その一つはある時から音楽プレイヤーがどういうわけか鳴らなくなっていました。
こういった不具合の解決にはまずはネットを検索してみるのが一番てっとり早いです。
プレイヤーを鳴らすにはDropboxに置いたmp3ファイルをJimdoから呼び出すのですが、そのファイルのURL先を前述のとおり
https://www.dropbox.com/△△△.mp3?dl=1
としていました。
今まではこれでちゃんと音が出ていたのですが、ネットの教えるところによりこれを
https://www.dl.dropboxusercontent.com/□□□.mp3
に書き換える必要があるとのこと、やってみますとうまく鳴ってくれました。
なぜこのようにしなければならないのか説明はどこにもありません。
また前述のやりたいこと(1)から(5)についてブラウザ等の仕様変更等によりうまく制御がきかない項目が生じ(下表×印)、いろいろやってみていますが現在改善不能です。
この状況は今後また変わるかも知れません。
最近ウェブブラウザのポリシー変更によりブラウザの多くが音声の自動再生をサポートしなくなっているようです。
音声が自動で流れるコンテンツはHP来訪者を不快にさせてしまう恐れがあるという理由からのようで、そのためあらかじめ音量を下げる設定にしておいたのですが音量設定も無効となれば自動再生はあきらめざるを得ません。
従って自動再生はやめることにしました。
裏ワザ的手法で無理やり自動再生や音量設定を実現させるやり方があるのかも知れませんが、そこまでして自動再生にこだわってはいません。
ただスキンデザインについてはもう少し小型にできればと思っているのですが。
以上必ずしも当初の希望どおりの完全な設定ができたとは言えませんがとにかくHPで音楽を鳴らすことができるようになりました。
今後改良ができれば随時本稿の改訂を重ねてゆければと思います。