QAZのつれづれ日記

  思いついたことを気ままにブログで

Jimdoホームページにプレイヤーを埋め込んで鳴らす方法(1/2)

2017年02月04日 | パソコン

現在Jimdo(ジンドゥー)無料版でホームページを作成中です。

Jimdoは従来のようにホームページ・ビルダーのような難しくかつ高価なHP作成ソフトを必要とせず本ブログのようにウェブ上で簡単かつ無料でHPの作成ができてしまいますので、今までHP作りにさんざん苦労した私にはこれは便利とばかりすぐ飛びつきました。

確かに簡単ではありますが、簡単だということはちょっと複雑なことをしようと思ってもなかなか思う通りにはできないということの裏返しだということでもあります。
何ごとも世の中そううまくはいってくれません。

私のHPでは音楽を鳴らしたいのです。
Jimdo HPにプレイヤーを埋め込んで鳴らすことができましたので、わかったことを忘れないうちに2回に分けて書き留めておきたいと思います。
以下の内容はOS-Win7(64bit)、ブラウザIE11を前提にしています。

HPで音楽を鳴らすには
(1) 曲名をクリックするとブラウザのメディアプレイヤーが立ち上がって曲を鳴らす
(2) 曲名をクリックするとリンクを張ったDropboxなどのオンラインストレージサービスが立ち上がってそこに保存してある該当曲が鳴る
(3) HPに埋め込んだmp3プレイヤーの再生ボタンをクリックすると(あるいはクリックしなくてもHPを開いただけで自動的に)曲が鳴り出す
などの方法があるかと思います。

(1)が実現できれば一番簡単なのですがJimdoのHPはあいにくmp3ファイルなど音楽ファイルがアップロードできないためこの方法は使えません。
無理にmp3ファイルをアップしようとすれば「アップロードできるファイル形式:PDF、GIF、JPEG、PNG、SVG、CSS、JS、EOT、TTF、WOFF」と注意書きが現れてそこから先進めません。

(2)は曲を鳴らす別窓が開くためJimdoのHPだけでは完結しませんので使いたくありません。
したがって残る(3)の方法が使えないか検討しました。

Jimdoは2009年ドイツ生まれの音楽再生プレイヤーsimfy(シンファイ) の機能が追加されたのですが1年もしないうちに国際的なライセンスの問題で提供が停止されてしまっています。

従って(3)の方法を実現するためには
(A) 自分の好みのデザインのプレイヤーを生成するプレイヤーソフトをダウンロードしてHPにそのプレイヤーを埋め込む
(B) 鳴らしたい音楽ファイルをネットのどこかのサーバーにアップロードしておきHPを見た人誰もがそのファイルに自動的にアクセスしてHP上に呼び出せるようにしておく
この2つの作業が必要です。

いざ検討を始めますと(A)、(B)ともかなり骨が折れました。
まず(A)について、mp3プレイヤーはネットにたくさん紹介されていますがmp3プレイヤーソフトのあるサイトのURLのほとんどはhttp://から始まります。

プレイヤーをHPに埋め込むときプレイヤーソフトのあるサイトのURLが必要になりますがJimdoではhttps://から始まるURLしか受け付けないためほとんどのmp3プレイヤーソフトが使えません。
http://のURLを入力しようとすれば「コードの一部がHTTPSに準拠していません」と出て、そこから先進むことができなくなります。

https://から始まるURLを新しいウェブサイトとして登録するためのGoogle Search Consoleの使い方も難しくてよくわかりません。
一難去ればまた一難、津波のような波状攻撃に立ち向かう心境で、なかなかゴールにたどり着きません。

ここで現れた救世主がHTML5<audio>タグです。
何とmp3プレイヤーソフトを全く使うことなくブラウザが勝手に下のようなmp3プレイヤーをHPに埋め込んでくれますからこれは非常に便利です。


タグの基本形は
<audio src="***" controls></audio>
たったこれだけです。
これを編集画面のウィジェット/HTMLのところに書き込めばOKです。
***はmp3音源をアップロードした先のURLです。
このURLも当然http://ではだめでhttps://から始まらなくてはなりません。

残るは音源をアップロードする作業(B)です。
ネット上にmp3ファイルを倉庫代わりの保存用に貸してくれる無料サーバーなんて探してもそうそうありません。
そこで思いつきますのはDropboxなどのオンラインストレージサービスを利用できないかということです。

ネットにはDropboxのpublicフォルダを使えばJimdoで音声を公開できますという記事が数多く紹介されています。
しかし一方でDropboxはpublicフォルダを廃止したとアナウンスしています。
この情報に大いに惑わされました。
この情報からDropboxがもうJimdoの音声公開には使えないと早合点してしまったのです。

確かに現在Dropboxにpublicホルダはもうありません。
しかしpublicホルダを介してのDropboxとJimdoの連携ができなくなっただけでDropboxを使ってJimdoで音声を公開すること自体ができなくなってしまったわけではなかったのです。(続く)

関連ブログ:
実に面倒くさいホームページ作成(2016.04.22)
ウェブサイトビルダー(2015.12.22)



最新の画像もっと見る

3 コメント

コメント日が  古い順  |   新しい順
質問です (大野)
2022-02-05 14:05:37
Jimdoホームページにプレイヤーを埋め込んで鳴らす方法(1/2)を参考にさせていただきました。
うまくいったのですが、どうしても最初の一回目の再生のみ、1~2秒で止まってしまうのです。クロームもエッジも同様でした。なにかご存じのことがあれば教えてくださいませ。よろしくお願い致します。
解決 (大野)
2022-02-05 16:08:39
お騒がせしました!
ドロップボックスからグーグルドライブに変更したら、解決しました。ありがとうございました。とっても参考になりました。
Jimdoホームページにプレイヤーを埋め込んで鳴らす方法(1/2) (QAZ)
2022-02-06 10:34:56
大野様
解決されて良かったです!
1~2秒で止まってしまう件、私は経験していませんのでどうお答えしたら良いものか悩んでおりました。
かえってこちらが教えていただくことになってしまいました。
有難うございます。
プレイヤーが大きすぎるのが難点、もう少し小さくしたいのですがやり方がわかりません。
HPを自在に使うのは難しいです。

コメントを投稿