ブログ内で直接BGMをかける方法を探し回ったというお話。
こんにちは、こんばんは、初めまして？
☆海貝あかりと申します。
今回は記事を開いた時、自動的にBGMが流れるようにしてみたかったというお話です。
※この記事はBGMが流れます。音量にご注意ください。
目次・めにゅ～
見ていたページから音楽を流せるようにしたかった
https://www.pakutaso.com/20160227055post-7061.html
私のサブブログ立ち上げにあたり、開いた記事から音楽が流れるように設定出来たら面白いだろうなと思い今回その設置を試み、こんな記事を上げています。
まずサブブログのご挨拶↓小説は記事2つ分（1記事2分もあれば読める）
そしてこの記事を取り上げたその下に一番単純な再生コードは載せましたが、少し問題が発生したので今回はこれの補足のようなものです↓
BGMのHTML自体は調べれば案外あっさり出てくる
https://www.pakutaso.com/20150145030post-5120.html
そう、その再生の仕方なら案外あっさり見つかったりします。実際のところ、私がかなり参考にさせていただいたのはHTML5/埋め込み/audio要素 プラグインを使わずに音声を再生する - TAG indexというサイトさん。
どうしてもプレイヤー表示なしで埋め込みで外観を壊さず、シンプルにでも音楽を流せるという仕組みにしたかったのです。
そうして私が探しに出かけたのはフリーBGMを提供してくださっている方々のところでした。
主に使用させて頂く無料の素材屋さん
https://www.pakutaso.com/20160304075post-7258.html
写真は既にお分かりかと思いますが、私がよく素材をのぞかせていただいているのは
動画はもっぱらユーチューブですが時折ニコニコを外部プレイヤーで表示させることもあります。
音楽素材に関しては
・秋山さんフリーBGM・音楽素材｜H/MIX GALLERY
・甘茶さんフリー無料のBGM素材・音楽素材「甘茶の音楽工房」
を主体に気に入って使用させていただくことがありました。
お二方のサイトで音楽を再生するボタンをクリックすればわかるのですが、音楽再生時、サイトURLそのものがmp3の直リンクとなっているので、紹介したコードたった一つだけで問題なかったのです。
ですが、今現在この記事で流れている音楽も元々はピアプロからの音源。
私が小説で2話目以降から使いだしたのもニコニ・コモンズに登録されていた音源。
通常こちらのサイトはきちんとMP3形式のファイルをダウンロードしてからでないと使えない仕様です。
なので、例えばこのコードに↓
<audio src="example.mp3" ></audio> exampleの記述をURLに変えるだけではまったくもって一切音楽は流れ出しません。
※秋山さんと甘茶さんに関しては直リンクになるのでやらないほうが賢明かと思いますが私はTestとして使用させていただきましたので、今回だけはお見逃しください＾＾；
直リンクとやらは何故だめなのか
https://www.pakutaso.com/20160300075post-7256.html
ちなみになぜ直リンクがよくないといわれているのかについてはどうぞこちらも併せてご覧ください→直リンクがいけない理由
はてなブログ記述者ならなんとなくわかっていただけるのではないかと思うのですが、はてなブログでは画像をコピーしてそのまま記事に張り付けても、これは直リンクの行為に値しません。（通常はそのURL情報事持ってきてしまうので持ってきたサイトさんに負荷がかかってしまいます。）
何故コピーペーストなのに直リンクにならないのかは、コピーした画像が一度はてなフォトライフというところで画像として保存されるため、こちら側でアップロードされたものとして負担を担っているからです。ただし、最低限そこの素材のリンクを貼るなどしないと、あたかも自分が著作主かのようになってしまいますので、使わせていただくお礼のような意味合いも込めて使用させていただいた方のURLやサイト、名前などは記述するようにしましょう＾＾；
フリー素材屋さんは、すでに自分のサイトで膨大な量のデータを所持しており、いろんな方からのアクセスもあるので、使用した人たちみんなが直リンクでつなげたりしてしまうとサーバーの読み込みが大変重くなってしまうので迷惑行為になりかねないよ！というお話です。
MP3をリンク化させたい！
https://www.pakutaso.com/20160537138post-7872.html
あのコードでmp3を再生させるにはmp3そのものにリンクを作成したい！ということで今回使用したのがこちら↓
こちらでUpしたものを自分で確認すると、それ専用のファイルリンクが作成されます。
今回はCROWWORDさんから許可を得て、ピアプロからこちらをダウンロードさせてもらいました。
あたらしいURLが
https://dotup.org/uploda/dotup.orgxxxxxxx.mp3_dC7lNI20DJIrHyaRRa3F/dotup.orgxxxxxxx.mp3 と言う感じで生成されますので
<audio src="https://dotup.org/uploda/dotup.orgxxxxxxx.mp3_dC7lNI20DJIrHyaRRa3F/dotup.orgxxxxxxx.mp3 " ></audio>と書き換えすると音楽が流れます。
これでdropboxやGoogledriveなどを経由しなくてよくなったのでだいぶ楽になるかと思います♪
ちなみに私は今回<audio src="example.mp3" autoplay volume="-10000"></audio>で使用しています。
よろしければお試しください＾＾
☆海貝あかり
1520468
BGM by piapro(ピアプロ)|オンガク「アリア・フォース (off vocal)」 CROWWORD
