音声ファイルを画面を変えずにページ内で表示&再生させる方法

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

音声ファイルを画面を変えずにページ内で表示&再生させる方法

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

情報商材系のアフィリエイトサイトを運営してる方は、
自分で録音した音声をサイトに置くケースがそこそこ多いかと思います。

 

私も先日、運営サイトの一つで
音声ファイルをSIRIUSサイトに埋め込む必要がありました。

 

ところが”画像”はすぐに取り込めるけど、
”音声ファイル”はどうすればいい?という疑問にぶち当たっちゃいまして。

 

そこはいろいろトライしてみて
とりあえず音声ファイルを設置するところまではこぎつけたんですね。

 

下の「テスト音声」というリンクをクリックしてみてください。

(※新しいタブで音声再生画面が開かれ、すぐに再生が始まります)

 

テスト音声

 

音声再生画面ですが、
簡易コントロールバーだけがポツンと置かれた無機質な黒画面が出てきましたでしょ。

 

あなたも一度は見たことがあるんじゃないですか?あの画面を。

 

区切り画像

 

今回のように別タブで表示されるならまだいいんですが、
中には元のページ内で”黒画面”に切り替えさせちゃうサイトもあったりします。

 

それだと元のページが見れなくなっちゃうんですよね。

 

音声を集中して聞くだけならそれでもいいでしょう。

でも時にはページ内の表やグラフや画像なんかを見ながら音声を聞いた方がよりわかりやすいなんてこともあったりします。

 

それに黒画面のコントロールボタンだと、
ファイルの長さ(再生時間)は表示されないんですよね。

(Androidスマホは表示されます)

 

もちろんシークバーを最後までドラッグすればわからないこともないんですが、面倒です。

 

元のページに再生時間をテキストで表示してくれればいいんですが、
そういうサイトって意外に少ないですし。

 

できることなら同一ページ内にコントロールバーがあって、
そこで再生や一時停止なんかが操作できた方が
訪問者には優しいページなんじゃないかと個人的には思ってます。

 

たとえばこんな↓感じのコントロールバーがページ内に最初から存在してれば
ページを見ながら音声を聞くことだってできます。

 

時間の有効活用にもつながります。

 

キャプチャ画像

 

ということで、ここでは一般的に使われている黒画面での音声再生方法とSIRIUSへの書き方

そしてページ内に最初からコントロールバーを表示させる方法の2通りのやり方をご紹介します。

 

後者を実行すると下のような感じで表示されます。

 

キャプチャ画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


TOPへ戻る