ホームページの作り方

ホームページビルダーでホームページを作っているのですが、語学の教材で、文をクリックするとその音声が出るものを作りたいのです。どのような作り方をしたらいいのでしょうか。録音した音声ファイルをリンクで挿入させるのでしょうか。容量がかなり大きくなってしまうので、なるべく容量が少ないものを作りたいのですか。またクリックしたときにプレーヤーの絵が出ないようにすることはできますか。

No.6 ベストアンサー 回答者： sksu003nh 回答日時： 2013/10/17 15:40

　＞ところで、この場所って、１対１のような形で、いつまでもずるずるとやりとりしていて、いいのでしょうか。

　いいところに気がつきましたね．
　この質問サイトの規約では，質問に対する回答とそれに対する補足・お礼などに対し，適切な内容なら追加回答することは特に禁じられていません．
　しかし，本来１回の回答で適切な回答をするのが最良ですし，追加回答が続いて長くなってしまうと後から同じような悩みで閲覧する方に不便な思いをさせてしまいます．
　それに，今までのやり取りでかなり突っ込んだ内容を回答できましたので，このあたりで私の考えを書きます．

　音声ファイルを公開にするにあたっては，従来唯一可能だったのは「a」タグでのリンクによってダウンロードさせる方法でした．
　次に，ホームページビルダーの「ビデオファイル挿入」で可能な「embed」タグによる埋め込みプレーヤーの機能がブラウザに搭載されました．
　そして，最新技術のHTML5でようやく全ブラウザ共通の「audio」タグが誕生し，今後はどんな環境でもこのタグで音声の配信ができる素地が整いました．

　現時点では，Windows Vista以降，Android 4以降，iOSなどの最新の環境を使う限り「audio」タグでの埋め込みが，ホームページを作るほうも見るほうも最も簡単です．
　今後このタグが標準的になり，どんな環境でもほぼ同じ使い勝手で閲覧できると思いますので，私個人としては「audio」タグをホームページビルダーの「HTMLソース」編集画面で手動で記述することを推奨します．

　最後に，この質問サイトの利用方法についてですが，私が今まで使ってきた経験では，わからない点を絞り込んでピンポイントの質問をすると的確な回答がつきます．
　今回の一連のやり取りでわからないことが出てきた場合，一点に絞って新しい質問を投稿すると他の方の目にも留まって的確な回答が得られる可能性が高くなります．（質問から時間がたつと「興味のある分野の新しい質問リスト」からなくなってしまって回答もつきにくくなります．）
　私の知識だけではわからないこともありますので，その質問に私が回答する可能性は決して高くありませんが，より良い知識を持つ方を見つけるいい機会になります．
　今までの私の回答で一定の目途がついたと判断されれば，回答を締め切ってしまってかまいません．
　ベストアンサーを指定するのが最良ですが，これだけ多方向への回答をしてしまうとどれがベストアンサーか決められないこともあるかと思います．
　その場合，ベストアンサーを指定せずに締め切ることも可能だったと思いますので，迷いましたら遠慮なくベストアンサー無しで締め切ってください．

　私の知識が少しでも役に立つことをお祈り申し上げます．

この回答へのお礼

いろいろ教えていただきまして、本当にありがとうございました。本当に勉強になりました。
またわざわざ調べてくださったことにも感謝しています。
今日のお答えで、ホームページビルダー18を使って「audio」タグで、という方向でやっていこうかなと考えます。もし、教えてくれる適当なところが見つかれば、それに越したことはありませんが。
また、進めていくうちに何か質問が出てくると思います。あらためて質問した際、気づいてくださることを期待しています。

お礼日時：2013/10/17 18:03

No.5 回答者： sksu003nh 回答日時： 2013/10/16 16:22

　サーバーの容量が問題になる，ということはすっかり忘れていました．

　私自身は年額５千円の有料サーバーを契約していて，容量１００ＧＢが確保されているので，音声ファイルぐらいではびくともしないのです．事情を酌むことができず申し訳ありませんでした．
　そうしますと，なおさら「超録」での低容量録音を検討すべきと思います．
　前回確認したところではApowersoftの録音ソフトは約160kbpsでしたが，これを80kbpsまで低下させると，ファイルサイズは単純計算で半分の大きさになります．つまり，サーバーに約２倍の長さの音声ファイルをアップロードできます．
　試しにパソコンに接続したマイクを使い，「超録」で80kbps44.1kHzステレオの音声を録音してみましたが，音楽等で気になるようなノイズはなく，160kbpsの音声とあまり変わらない印象でした．

　次に「audio」タグによる埋め込みですが，回答No.3で述べたとおり，パソコンの主要ブラウザとiOS標準ブラウザ（及びSleipnirという国産ブラウザ）では再生・停止のコントロールなどができる埋め込みプレーヤーが表示されます．この場合，音声ファイルは一括でダウンロードして再生するのではなく，YouTubeのようにストリーミング（逐次読み込み）して再生されるような挙動でした．
　パソコンでの問題としては，Windows標準のInternet Explorerの場合，Windows Vista以降でないとaudioタグには対応していません．Firefoxという第三者製のブラウザならWindows XPから対応できます．
　次の問題はスマートフォン市場で大きなシェアのあるAndroidです．
　私自身所持していないのではっきりとしたことは言えないのですが，調べたところでは標準のブラウザのほかにパソコンと同様に追加可能なブラウザが有名無名多数あるようです．
　当然のこととしてブラウザによって可能な動作が異なると思われますので，こればかりは実際にスマートフォンで読み込んで確認するしかないでしょう．
　中にはパソコン同様の動作をするブラウザも，動作しないブラウザもある可能性がありますから，閲覧していただく方のブラウザを指定する必要があるかもしれません．かなり手間がかかりそうです．

　最後に「ビデオファイルの挿入」での埋め込みですが，これはパソコンの場合標準のプレーヤーが何かによって埋め込みプレーヤーの種類が異なります．
　私はiOS端末を利用することから，パソコンではQuickTimeというアップル社の提供する再生ソフトが標準指定です．これによる埋め込みプレーヤーは再生・停止・一時停止などのコントロールができます．
　他にはWindows標準のWindows Media Playerや，Real Playerといった第三者が作ったプレーヤーが複数あり，パソコンによって標準プレーヤーは異なるため，埋め込まれるプレーヤーの機能にも違いがあります．
　標準指定のプレーヤーを変えるのは手間がかかり，ふとしたはずみに標準プレーヤーが変わってしまうこともあるため，常に期待した動作をさせるのは困難です．
　また，少なくともiOSの端末では再生ボタンを押すと別途プレーヤーが全面表示される動作でした．他のスマートフォンでも同様の動作の可能性があります．

この回答への補足

sksu003nh様

いろいろご親切に教えていただいたので、ご報告したくなってしまいます。
昨日は、回答をいただいてすぐお礼を投稿したのですが、反映されたのは、なんと今日になってからでした！
（もっとも、夜の間は見ていませんが。）
教えていただいた「ビデオファイルの挿入」からやる方法は、Androidスマートフォンでは、音声が全く出ませんでした。埋め込プレーヤーの位置に「？」の表示が出ていました。したがって、この方法はあきらめざるを得ません。
埋め込プレーヤーは、Windows Media Playerでもコントロールができました。
音声って、本当に面倒で大変なんですね。不特定多数の利用者に(機械に弱い人にも子供にも)、手軽に利用してもらいたいと思っているので、利用者のほうに利用環境を変えたりすることを要求できません。もっと簡単に作れると思って始めたのですが、私の力ではそういうものを作るのは無理なのでしょうか。
料金を払っても、そういうことを教えてくれるところは、ないものでしょうか。
ところで、この場所って、１対１のような形で、いつまでもずるずるとやりとりしていて、いいのでしょうか。

補足日時：2013/10/16 16:53

No.4 回答者： sksu003nh 回答日時： 2013/10/15 16:46

　まず，ファイルの大きさについてです．

　約１分で約１メガバイトということは，160kbps程度で録音されています．私が同じソフトで試したところ171kbpsでした．中途半端なので可変ビットレートかもしれません．
　このファイルの大きさは現在一般的なものです．これ以上小さくすると音質が悪くなりますし，利点はあまりありません．
　というのも，現在主流の高速回線では最低でも1Mbps（＝約1000kbps）ですから，１分程度の音声ファイルは一瞬で転送できます．問題になるのは携帯電話で利用した場合で，従量課金だとファイルの容量に応じて接続料金が高くなります．
　音質・ファイルの大きさに不満がなければこのソフトを利用してかまいませんが，不満があれば前回紹介した「超録」を使うことをおすすめします．

　次にリンクの方法ですが，ホームページビルダーは今のところHTML5に対応しておらず，audioタグも使えません．（バージョン17の時点）
　他のメーカーでは，Adobe社のDreamweaverというソフトがHTML5対応なのですが，月額2200円を払い続けないといけないので高価です．
　実は私の手元に古いホームページビルダー13がありまして，埋め込む方法がないか試してみました．
　その結果，「ビデオファイルの挿入」ダイアログで全てのファイルを表示し，mp3の音声ファイルを指定すると，何の支障もなくページに埋め込まれました．このとき「embed」というタグが使われました．このとき「ページ編集」画面では正方形の画像が表示され，「プレビュー」画面で実際の埋め込みの様子が確認できました．
　この方法で埋め込んだ場合，パソコンではブラウザ標準の埋め込みプレーヤーが使われ，iPod touchでは全画面表示のプレーヤーが表示されました．（Androidスマートフォンは持っていないので試していません）
　少し困ったことに，この埋め込み方法だとパソコンの場合，ページ表示と同時に再生が始まってしまいました．複数の音声を同じページに埋め込むには適していないようです．
　ホームページビルダーを使い続ける限り，ソフトの機能の範囲での作業になりますから，標準の「a」タグでのリンクで毎回プレーヤーが表示されるのを容認するか，「ビデオファイルの挿入」で埋め込んでパソコンだけでも埋め込みプレーヤーを使うかのどちらかになりそうです．

　余談ですが，ホームページビルダーの「HTMLソース」画面で編集ができれば，audioタグでの埋め込みも無理矢理ですができます．embedタグでの埋め込みも自動再生の設定ができる可能性があります．
　ホームページを作る過程で問題が出てきた場合，HTMLソースの編集ができると解決が早いことがほとんどです．
　時間があればHTMLソースの編集方法を勉強すると後で役に立つでしょう．
　私自身も，今ではメモ帳などでタグを直接入力してホームページを作っています．ホームページビルダーは付属の画像編集ソフトなどを使うだけです．そのためバージョン13から買い替えていないのです．

この回答へのお礼

sksu003nh様
なんと親切な方に巡り会えたのだろうと、感謝しています。
さきほどホームページビルダー18の体験版で、html編集でaudioでやってみたら、無事できました!
私でも出来たので、感激しました。ただ、体験版なのでアップすることができず、スマートフォンでどうなるかは見ることができません。もしうまくいけば、しかたないから新しいバージョンを買おうと思ってジャストシステムに質問を出してみましたが、はたして回答が来るかどうか。
私の使っているのは、V12ですが、今、教えていただいた「ビデオファイルの挿入」からやってみましたら、これも無事成功!今のところ1ページに一つの音声しか埋め込む予定はないので、ページが表示されてすぐ音声がスタートするのは構わないと思います。埋め込みプレーヤーで停止できたり、コントロールできれば。問題は、スマートフォンでプレーヤーが前面表示されてしまうことです。文字を見ながら聞いてもらいたいので。これは、audioタグにしてみても、同じようなってしまうような気が…。それならば、毎回プレーヤーが表示されるのと、たいして変わらないので、またまた困ってしまいます。
録音は、今度「超録」も試してみます。なるべく容量を少なくしたい理由は、今使っているサーバーの容量の割り当てが、そんなに多くないことです。
でも、少しずつ勉強になっています。今回、html4とか、5などがあることも初めて知りましたし。

お礼日時：2013/10/15 17:54

No.3 回答者： sksu003nh 回答日時： 2013/10/14 16:47

　回答No.2の補足への回答です．

　まず，(1)ですが，現在使用されているパソコンはほぼすべてMP3に対応しています．古いパソコンでは「コーデック」と呼ばれる専用の再生支援ソフトが必要なのですが，少なくともインターネットにつながっているパソコンのほとんどは問題なく再生できます．これはインターネットを利用するパソコンの種類の統計データによるもので，Windowsなら95%以上がWindows XP以降なので標準で対応しています．
　問題なのはスマートフォンやタブレットで，これらはパソコンと違ってファイルのダウンロードの方法が機種ごとに異なる場合があり，パソコンのように「a」タグによるリンクのクリックですぐに音声ファイルを再生させる方法はないと見られます．時間の都合上ドコモの扱う製品についてのみ調べてみましたが，ブラウザとは別のソフトを用意しないとダウンロード・再生ができない機種もあることがわかりました．
　これを解消するには，「a」タグの利用を考えていらっしゃる状況で申し訳ないのですが，やはり「audio」タグを利用するとパソコン・スマートフォン・タブレットを問わず利用できる可能性が高いです．
　調べたところ，iPhone等に搭載されているiOSではMP3が，最新のAndroid 4以降の端末でもMP3が対応しています．
　数世代前のAndroid 2が搭載されたスマートフォンでも，バージョンアップで最新のAndroid 4以降に更新できる可能性がありますのでaudioタグでの再生はかなり現実的です．
　今回確認したところWindows7上のFirefox24，InternetExplorer10及びiPod touch上のSafari（iOS5搭載）の各ブラウザでaudioタグでMP3を読み込ませて再生できました．
　今までにHTMLを直接編集した経験があれば，audioタグの実践的な使用方法は　<audio>－HTML5タグリファレンス（http://www.htmq.com/html5/audio.shtml）　で十分理解できるはずですのでこの方法を推奨します．ホームページビルダーの場合，古くてもHTMLソースを直接編集する方法があるはずですのでマニュアルを読んでください．

　次に(2)ですが，録音に使う機器によって操作方法が異なるため具体的な回答はできません．
　しかし，MP3ならステレオでも十分小さなサイズのファイルになるはずですのであえてモノラルにする利点はあまりありません．
　パソコン内蔵あるいは接続したマイクによるステレオでの録音でよければ，録音時間が90分以下の場合「♪超録 - パソコン長時間録音機 フリーウェア版（http://pino.to/choroku/index.htm）」をおすすめします．このソフトは別途「LAME Enc」というソフトをダウンロードしインストールすることでMP3で録音できます．「LAME Enc」は「超録」を起動して出力形式でMP3を選択するとダウンロードのリンクが開かれます．インストール後，出力形式をMP3にして，音質を設定すればMP3で録音できます．標準的な128kbpsでも音楽がそれなりの音質で聴けますが，音声だけなら80kbps程度でも十分だと思います．実際に録音して聴くと元の音からの劣化がわかることがあります．ちなみに，パソコンで扱える，最もファイルサイズの大きなWAV形式は約1500kbpsですのでMP3の10倍以上の大きさになります．

この回答へのお礼

またまたご丁寧な回答をありがとうございました。それに、いろいろ調べてくださったりして、感謝しています。
ただ、私の力ではhtmlを自分で編集するのは、やはり無理そうで、どうしたものかと思っています。今使っているのが古いホームページビルダーなので、新しいものだったら簡単にリンクできるのであれば、買い直すのですが。
ちなみにaタグ?(これもよく分からないのですが)で試しに作ってみたものをアンドロイドのスマートフォンで見てみたら、プレーヤーを選択するようになっていて、選択すれば、音は再生されました。しかし、プレーヤーが前面に表示され、画面の文字が見えないので、これは困ったことなのです。
また、録音ですが、Apowersoftというのを使って、mp3で録音したのですが、1分15秒で1.25MBで、これからたくさん録音しなければならないので、ちょっと重いなと思ったのです。
まだまだ解決しませんが、早くお礼をと思いました。

お礼日時：2013/10/14 22:34

No.2 回答者： sksu003nh 回答日時： 2013/10/10 16:14

　一番簡単なのは音声ファイルとHTMLファイルをサーバーにアップロードしてHTMLにその音声ファイルのリンク（「a」タグ）を記述して使用者にダウンロード（あるいは直接再生ソフトを起動）してもらう方法です．

　ただ，これだと毎回音声再生ソフト（Windows Media Playerなど）を起動させて聴く必要があります．
　とはいえ，これが一番一般的でスマートな方法だと思います．

　一方，他にソフトを用意することでもう少し見映えのいい再生方法を選択することもできます．
　これらに関しては私自身やったことがないので一部推測を含みます．
　現在最も普及しているのはFlashです．今ではブラウザゲームなどに使われることもあるソフトです．
　動画の配信によく使われていて，その例としては「YouTube」や「ニコニコ動画」，「バンダイチャンネル」などが挙げられます．同じ仕組みで音声の配信もできます．
　しかし，作成ソフトが高価で資金のあるクリエイターや企業でないとコストが大きな負担になります．
　配信の仕組みも自分で設計する必要があるはずですので手間は尋常ではないでしょう．

　つまるところ最初に紹介した方法が一番手間がかからず簡単なのですが，最新のHTML5対応ブラウザで可能な方法も紹介します．
　それはHTML5で追加されたタグの「audio」を使う方法です．「文をクリックして」には対応しないのですが，小さな埋め込みプレーヤーを使ってブラウザだけで再生できます．
　詳細は「HTML タグ audio」などで検索していただいた方がいいのですが，ブラウザによって再生可能な音声形式が違うようなので，使用者に閲覧環境を指定しないといけないかもしれません．
　後数年すればどんな環境でも閲覧できる状況になると思うのですが，現時点ではあまり推奨はできないかもしれません．

　最後に音声ファイルの容量ですが，回答No.1の方のおっしゃるとおりモノラルにしたほうが半分になりますし，圧縮の形式を考えることでより小さなファイルにできます．
　具体的には，WAVよりもMP3，MP3よりもOGGといったところです．それぞれ後者の方が低容量でほぼ同じ品質になります．
　といっても，閲覧者の環境で再生できないと意味がありませんので，それも勘案して形式を選択することになるでしょう．

この回答への補足

sksu003nh様

丁寧なお答えをありがとうございました。というものの、知識の乏しい私がはたしてちゃんと理解しているかは疑問ですが。でも、前にやってみた方法が、どうやらお答えの一番初めに書かれたもののようで、やはり私の力ではこれしか方法がないようだということもわかりました。
知識がないということで、重ねてお聞きしたいことがあります。
(1)どんな環境でも再生できるという点で、音声ファイルの形式は、何が一番いいのでしょうか。ＭＰ３ですか。また、スマートフォンやタブレットでも再生できるのでしょうか。
(2)モノラルにするにはどうすればいいのですか。後で変換するのですか。それとも録音するときにモノラルにする方法はありますか。後でいちいち変換するのは大変なので。
よろしくお願いします。

補足日時：2013/10/12 14:26

No.1 回答者： yomyom01 回答日時： 2013/10/09 22:14

＞なるべく容量が少ないものを作りたいのですか

モノラルなら半分ですむ