Home > 技術 > HTML5のaudio用jQuery Plugin - jAudio

HTML5のaudio用jQuery Plugin - jAudio

2010-03-19 (金)
技術

たいしたものではないが、最近HTML5のaudioタグで遊んでいるので、そのためのプラグインを書いておいた。
audioタグのもつメンバもブラウザによってまちまちだったりするので、完璧ではないがとりあえず動くレベル。

たとえばFirefox3.6ではplaybackRateが動かないが、Chrome5では動くなどなど。

プログラムコード

全部のメンバ網羅できてないかもしれないが、だいたいこれぐらいあれば遊べる。
複数のaudioタグを使ってDJなどするときように、prototypeで実装した。

// jAudio - jQuery Plugin
(function($) {
	// init
	$.jAudio = function(elem) {
		return new Audio(elem);
	}

var Audio = function(elem) {
		this.audio = elem.get(0);
	}

Audio.prototype = {
		audio: null,

// getter
		isPaused: function() { return this.audio.paused; },
		isEnded: function() { return this.audio.ended; },
		getDuration: function() { return this.audio.duration; },
		getSeeking: function() { return this.audio.seeking; },
		getPlayed: function() { return this.audio.played; },
		get: function() { return this.audio; },

// properties
		loop: function(b) {
			this.audio.loop = b;
			return this;
		},
		currentTime: function(time) {
			this.audio.currentTime = time;
			return this;
		},
		autobuffer: function(b) {
			// default false
			this.audio.autobuffer = b;
			return this;
		},
		muted: function(b) {
			// default false
			this.audio.muted = b;
			return this;
		},
		volume: function(v) {
			// default 1
			this.audio.volume = v;
			return this;
		},
		playbackRate: function(rate) {
			// default 1	chrome
			this.audio.playbackRate = rate;
			return this;
		},

// methods
		play: function() {
			this.audio.play();
			return this;
		},
		pause: function() {
			console.log(1);
			this.audio.pause();
			return this;
		},

// events
		canplay: function(fn) {
			var _this = this;
			$(this.audio).bind("canplay", function() {
				fn.call(_this);
			});
			return this;
		},
		playing: function(fn) {
			var _this = this;
			$(this.audio).bind("playing", function() {
				fn.call(_this);
			});
			return this;
		}
	}
})(jQuery);

サンプルコード

jQueryっぽくメソッドチェーン仕様。

playingの中はarguments.calleeを使ってループしてますが、これはあくまでもサンプルとしてで、実際には何もしなくてもよい。
上記実装だと10秒後に、また始めから再生する。

低音がなったタイミングとかを取得して、そのタイミングで何かアクションをおこしたりしてみたいんだけど、そんなことできないよな〜。。。

あと、ふと気になったのが、FIrefoxとChromeでデフォルトのボリュームは同じ1なのに、なんかChromeのほうが音量が大きいｗ

ダウンロード

gist: 337283 - GitHub

デモ

前にspace - HTML5 & CSS3 DEMOで作ったものをjAudioで置き換えてみました。

FirefoxとChromeで違う背景になります。
jAudio - HTML5 audio DEMO

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1254
Listed below are links to weblogs that reference: HTML5のaudio用jQuery Plugin - jAudio from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > HTML5のaudio用jQuery Plugin - jAudio

Search

Ads