Heal Cafe: html

ラベル html の投稿を表示しています。すべての投稿を表示

2014年2月28日金曜日

IEでcontrolsを使わずに自作ボタンでオーディオを再生、停止させる

久々のメモ

いつまでたってもブラウザの企画というのは統一されないようで。。。

特にIEは。。。と感じてしまいます。

html5が普通に使われるようになってもう随分経ちますが、オーディオプレーヤーを自作する必要に迫られまして、作った時に苦労したのでメモ。

なんで迫られたかといいますと、
・プレーヤーを置く場所がボタン1個分のスペースしかない
・audioタグ属性のcontrolsだと右クリックで簡単に音源をダウンロードできてしまうので、それを避けたい。
というのがおおまかな理由です。

IE以外のブラウザは
audioObj = new Audio();
みたいな感じでオーディオオブジェクトを生成すれば何てことはなくオリジナルのプレーヤーを作れてしまうのですが、IEはこの宣言が使えない。。。

なんで？？

って事で別方向からのアプローチ。
とりあえずソースはこんな感じ

sample.html
---------------------------------
<audio id="sample">
<source src="sample01.mp3">
</audio>
<button class="player" onclick="playAudio()">再生</button>
<button class="player" style="display: none" onclick="stopAudio()">停止</button>
---------------------------------

sample.js
---------------------------------
function playAudio(){
document.getElementById("sample").currentTime = 0;
document.getElementById("sample").play();
$(".player").toggle();
}

function stopAudio01(){
document.getElementById("sample").pause();
$(".player").toggle();
}
---------------------------------
IEの場合body内のどこかにaudioを宣言しておく必要があるみたい。
なのでわかりやすいようにボタンの上らへんで宣言。
再生ボタンを押したら、オーディオ再生後、jqueryのtoggle()を使って停止ボタンを表示させるといった仕組み。
.play()の前に
.currentTime = 0;
としているのは、audioタグにはストップ（停止して頭に戻る）という命令がないらしい。
あるのは
pause()
要は一時停止。
なのでpauseのままだともう一度再生ボタンを押したら曲の途中から始まっちゃうわけ。

なんでstopがないの？？

って事でplay()させる前に一度頭に戻して再生するということをここでやってます。

終わってみればだらだら長いプログラムでもないので、気楽で良いスクリプトかも。。。

まぁプロの人から見れば落とし穴満載なんだろうけど。。。

2012年6月15日金曜日

coda2

macのhtmエディタ「coda2」が早々にマイナーアップして2.0.1となった。

内容はOS10.6に最適化させるのが主な内容。

これまでOS10.7に意識し過ぎて、10.6ではバグだらけとされていたが、今回のマイナーアップでかなり解消されたっぽい。

実際に使ってみても特にバグらしいバグは無く、至って快適です。

でも。。。

やっぱ旧バージョンのcodaの方が手っ取り早く使えたという印象。。。

しばらくcodaを使い続ける事になりそう。。。

折角買ったのに。。。

2012年6月3日日曜日

HTML5 audio要素

HTML5のaudio要素を使ってスマホサイトでaudioの再生をしたい。。。

と思ってやってみたが、どうにもうまくいかない。。。

基本的には

<audio controls>
<source src="sd/sample.mp3" type="audio/mp3">
<source src="sd/sample.wav" type="audio/wav">
<source src="sd/sample.ogg" type="audio/ogg">
</audio>

これでなるはずなんだけどなぁ。。。

と思って色々いじっていたら、PC上でも鳴らなくなってしまった。。。

鳴らなくなったと言うよりは、プレーヤー事態は表示されるんだけど、再生ボタンとかを押しても反応しない状態になっている。。。

と言うか、音楽ファイルを読み込んで無いっぽい。。。

ってことで

<audio id="audio" preload="auto" controls>
<source src="sd/sample.mp3" type="audio/mp3">
<source src="sd/sample.wav" type="audio/wav">
<source src="sd/sample.ogg" type="audio/ogg">
</audio>

みたいな事をやってみると、再生ボタンが押せるようになる曲と、押せない曲とが混在するようになった。。。

改善してるの？？

ダメなの？？

よくわかりませんな。。。

2011年1月4日火曜日

htmlで数秒後に他のURLにジャンプさせる方法

どうやら２つやり方があるらしい。

1.htmlの<meta>タグによるやり方
<html>
<head>
<meta http-equiv="refresh" content="秒数; ジャンプさせるURL">
<title></title>
</head>
<body>
</body>
</html>

といたってシンプル。

2.javascriptによるやり方
<html>
<head>
<title></title>

<script language="JavaScript">

</script>

</head>
<body>
</body>
</html>

とちょっと複雑。

って事を踏まえて<meta>タグの方でやってみたら、macのsafariでは問題なくできるのにwindowsのIEではxpでも7でもダメ。。。

javascriptの方は両ブラウザとも問題なくジャンプできました。

なるほど。

簡単なのにはそれなりにワケがあるのね。