Home > パソコン・インターネット > | 音楽 > mp3再生: audio.js 設置

mp3再生: audio.js 設置

ICレコーダーで録音した音をWeb上で公開する方法を確認してたんですが、YouTube ではいちいち動画化しないといけないみたいなので、ググってみたら audio.js というのを見つけました。JavaScript だけで mp3ファイルが再生できるようです。 ブラウザによっては単に mp3 ファイルをサーバに置いてリンクしておくだけでも再生画面が出ましたが、audio.js ならページ内で直接再生できるのが利点です。 【参考Webサイト】 ◆ ダウンロード、ドキュメント http://kolber.github.io/audiojs/ 【設置・使用方法】 ◆ Scriptのアップロード ダウンロードした audio.min.js、 player-graphics.gif、audiojs.swf をサーバに置きます。 MovableType の場合は、JavaScript の類は mt-static の下の js ディレクトリに置くのが良いと思われますので、サブディレクトリ audiojs を作成して、そこにまとめて置きます。 ◆ HTML内で audio.min.js を使うための記述を追加 以下の記述場所は、HTMLヘッダ内が適切かと思います。 ・Script を読み込む src のパスは、設置した場所を記述します。 MovableType では HTMLヘッダのテンプレート内に記述します。 Script を置いた mt-static のパスはテンプレート中で <$MTStaticWebPath$> タグで表現できますので、以下のようになります。
<script src="<$MTStaticWebPath$>/js/audiojs/audio.min.js"></script>
・ audio.min.js の初期化 これも、上のコードに続けて書けばOK。
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>
◆ ウェブページやブログ記事中の再生バーを設置したい場所にaudioタグで記述
<audio preload="auto">
  <source src="yourBlogURL/audio/foo.mp3">
</audio>
src には、再生したい mp3 ファイルのパスを入れます。 以上でデフォルトの見た目の再生バーが設置できます。 【見た目の変更】 再生バーの色やサイズを変えたい時、ボタン形状を変えたいような場合は、CSS で指定ができるようです。 Chrome の Firebug で解析すると以下のようなHTMLコードが生成され、各要素にクラス定義がされていましたので、個々の要素に対して CSSを指定してやれば変更できます。 デフォルトの CSS定義は Script に埋め込まれていますので、HTMLヘッダ中の初期化のコードの直後で再定義する CSSファイルを読み込むようにすれば良いでしょう。
<div class="audiojs " classname="audiojs" id="audiojs_wrapper0">
	<audio preload="auto">
		<source src="yourBlogURL/audio/foo.mp3"/>
	</audio>
	<div class="play-pause">
		<p class="play"/>
		<p class="pause"/>
		<p class="loading"/>
		<p class="error"/>
	</div>
	<div class="scrubber">
		<div class="progress" style="width: 0px;"/>
		<div class="loaded" style="width: 87.01676264951884px;"/>
	</div>
	<div class="time">
		<em class="played">00:00</em>
		/
		<strong class="duration">03:17</strong>
	</div>
	<div class="error-message"/>
</div>
今回は幅を変えたいだけだったので、Script内の定義を直接変更してしまいました。 .audiojs の width を 460px → 420px .audiojs.scrubber の width を 280px → 240px; 【動作確認ブラウザ】 以下のブラウザでの動作を確認しています。 IEの古いバージョンでの動作は怪しい気がします。 Windows7  IE10  Google Chrome Ver31.0.1650.63 m  Mozzilla Forefox 19.0.2、26.0 iPad (iOS6)  Safari 6.0

Comments:0

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://nobbyspage.net/mt/mt-tb.cgi/1457
Listed below are links to weblogs that reference
mp3再生: audio.js 設置 from Nobby's Diary

Home > パソコン・インターネット > | 音楽 > mp3再生: audio.js 設置

counter

today: today
yesterday: yesterday

Search
Tag Cloud
Twitter
Tide Graph
福井県-敦賀
提供:釣り情報フィッシングラボ
Links
Feeds

Return to page top