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

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によってシステム内部に様々な改良が加えられました。

これにより当サイトでご紹介している独自の機能拡張の一部が【新】SIRIUSテンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものも出てきてます。

よって今後このサイトの更新はストップすることにしました。(サイトはしばらくは残しておきます)

これに伴い、【新】SIRIUSテンプレートに対応した『SIRIUSでホームページ作成』サイトを新規公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきたTipsが最初から組み込まれたカスタムテンプレートであり、当サイトではご紹介してない新機能も追加搭載してます。

※当サイトの更新ストップにより、一部の記事は自動的に新サイトの同記事に自動転送されます。

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

サンプル画像

 

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

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

 

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

 

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

 

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

 

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

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

 

テスト音声

 

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

 

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

 

区切り画像

 

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

 

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

 

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

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

 

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

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

 

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

 

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

 

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

 

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

 

キャプチャ画像

 

実際に音声を埋め込んでみました。
再生ボタンをクリックしてみてください。

(※今見てるブラウザやバージョンの違いによって必ずしも上と同じコントローラーが出てくるとは限らないのでその点はご了承ください)

 

 

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

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

 

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

 

キャプチャ画像

 

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


てっぺん