Just Metal, Just Baroque.: html5 の audio / video の音量を設定したり再生時間を求めたりする
4/20/2010 html5 の audio / video の音量を設定したり再生時間を求めたりする mp3 プレイヤを作る上で欠かせないものの一つになる、音量の設定や再生時間の取得。これも html5 の video / audio 要素の機能に javascript 側で操作できる。 例えば、html 側で次のような audio ソースが定義されているとする。 <audio id="mp3" src="xxx.mp3" autobuffer></audio> id:mp3 の音源を変数 audio として定義しておく。 // id:mp3 を変数 audio として定義 var audio = document.getElementById("mp3"); さて、この xxx.mp3 の音量を設定したいときは、こんな感じで。 // volume を 0.5（0〜1 の数値）に設定
無職のプログラミング HTML5 Audio オブジェクトを JavaScript で制御する方法
HTML5 の Audio オブジェクトについて調べたことをまとめる。 なお、本エントリでは Audioタグについては記述しない。 ＜注意＞以下で示すソースコードは、Firefox3.6 と GoogleChrome7 でしか検証していません。 目次 1. HTMLAudioElement オブジェクトの作成 2. HTML5 Audio およびコーデックのサポートチェック 3. 再生する Audio ファイルの指定 4. Audio ファイルの再生、一時停止、停止 5. Audio ファイルの音量変更 6. サンプルプログラム 1. HTMLAudioElement オブジェクトの作成 参考ページ： audio 要素 - HTML5 タグリファレンス - HTML5.JP JavaScriptで制御するために、Audio要素のオブジェクトを作成する必用がある。 作成方法は以下の2通り /
HTML5 audioタグを使って音声を再生する方法 | TechBooster
上記のpreload属性は音声ファイルの事前読み込みの有無を指定する為の属性です。 ユーザが再生を開始する前にあらかじめ音声ファイルを読み込んでおくことでスムーズに再生を始めることができます。 preload属性に指定可能な値は以下のようなものがあります。 none : 音声ファイルを事前に読み込まない metadata : 動画のサイズ（幅や高さ）、1フレーム目の画像、再生時間など、動画のメタデータのみ取得する auto : 音声ファイルを事前に読み込む 省略時、代表的なブラウザではautoが選択されます。 音声フォーマットのブラウザ対応 また、これもvideoタグと同様にsourceタグを使って再生可能な音声ファイルを設定することができます。 この中からブラウザが対応している音声ファイルが再生されます。 （ブラウザが複数の音声ファイルに対応している場合は、記述した順に対応可能なものが再
html5のlocalStorageで複数のデータを保存するには? - Web.fla
以前、localStorageのデータを保存する方法について記事を書きましたが、localStorageが保存できるデータは一つではなく複数のデータを保存する事もできます。 で、前回はキーに対してデータを一つだけ保存したのですが、今回は複数のデータを保存する方法として複数のデータをJSONデータとして扱えば可能になります。その方法を今回は紹介してみたいと思います。 前回のlocalStorageに保存する方法などはこちら「html5のwebStorage(localStorage)でデータを保存する」を参照してください。 localStorageを使った実際のコード 下記のプログラムは分かりやすくするために省略している。 //保存する処理 savebtn.addEventListener("click", function() { //入力されたデータを取得 var t = documen
ブラウザ動作の理解－リフローとリペイント及びその最適化 | ゆっくりと…
ブラウザ動作の理解の2回目です。今回はレンダリング・ツリーの更新に絡む、リフロー （要素の大きさ、位置などの再計算） とリペイント （描画） に関する解説を、「High Performance Web Pages – 20 new best practices」 の著者 Stoyan Stefanov のブログエントリーから 「Rendering: repaint, reflow/relayout, restyle」 を翻訳してお届けします。 同記事は、前半がリフローとリペイントに関する解説と、表示レスポンスを向上させるためのスタイル変更に関する Tips、後半は dynaTrace AJAX Edition と SpeedTracer を使った IE および Chrome の描画パフォーマンスの計測の解説で構成されてる、長い記事となっています。 今回はその前半部分をご紹介します。 レンダ
window.postMessage()の学習 - sugilogのブログ
javascriptのwindow間のメッセージングについて、存在は知っていたけどちゃんとコードとして落とし込めていなかったので学習。 参照先は以下の2サイト http://d.hatena.ne.jp/bannyan/20090820/1250789189 https://developer.mozilla.org/ja/DOM/window.postMessage window.postMessage 他のwindowに対して、messageを送る。 => window.postMessage(); windowを超えてクロスドメインでアクセスしようとすると、permission deniedになったり、undefinedになったりするけど、postMessageは有効に使える。 引数は第2引数まで取る。（第2引数まで必須。） otherWindow.postMessage(messa
HTML5 Drag and Drop API についてのまとめ 〜その１ 概要〜 - COBALT
UIとして 例えばどこかのサイトでメモしておきたい画像があったとして、 それを自分のオンラインストレージに保持したいというシーンがあったとする。 これまでは対象の画像を右クリックして画像のURLをコピー。 そしてアプリ上に入力フォームを表示する操作の後、先程のURLを入力して決定ボタンを押す。 といった操作によって対象の画像をメモするフローが多数を占めているかと思う。 この操作は大きく見ると大体６ステップのユーザ操作が必要となる。 もしこの操作を Drag and Drop により実装すると、対象画像を指定領域にドロップする。 以上の操作で行うことが出来る。 という事で効果的なUIのためにも、新しいアプリの可能性のためにも、Drag and Drop API は素敵。 ＜ みんな知ってる 実装 まずはdrop領域に対して以下のイベントを付与する。 drop dragover dropを実現
オンラインカジノ【おすすめ厳選ランキング10選】｜2025年8月
{"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"slots":false,"live_games":false,"is_live_dealer":false,"payment_methods":false,"sport_types":false,"live_streaming":false,"cash_out":false}]} ウェルカムボーナス {"is_any_tile":false,"sources":[{"source":"bmc_bonus_type","table_games":false,"bonus_types":false,"game_providers":false,"sl
独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム - DESIGNMAP
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
Webアプリケーションを高速化する50のトリック
MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時
Sublime Text2ってエディタがすごくイイ。
Macを使い始めて、いろいろ新しいソフトやアプリを探していたところ、同僚の方からいま人気のSublime Text 2というエディタを教えて頂きました。どうやら無料らしく(今後シェアウェアになるかも？)、初期設定や自分に合った環境に整えるのに少し手間取りましたが、なんとか実務で使えるレベルになってきたのでシェアします。 HTML5,CSS3,jsを書く事が多くて、Zen-CodingもSass+Compassも使うし、それにスマートフォンのマークアップ業務が多い！なんていう僕と同じような人がいるなら、このエディタはオススメですw 以下の設定通りにやれば、フロント寄りのエンジニアになら最低限は使えるものになると思います。 ダウンロード Sublime Text 2 – Dev Builds 初期設定 アプリを立ち上げて、Sublime text2 > Preference > Setting
HTML5 Custom Data Attributes (data-*) | HTML5 Doctor
Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! I implore you to rid your mind of that thought immediately and continue reading. Thanks to HTML5, we now have the ab
HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい ハブろぐ - havelog.ayumusato.com
Tweetボタンのdata-urlとかdata-text属性はアリなのか？ 結論は、本エントリーのタイトルの通りHTML5の仕様の中では定義済みということでアリでした。エントリーの下の方で情報の出所を紹介してます。以下は、後半まで逐次的な調べ物メモです。 以前、公式Tweet Buttonを早速試した！で、Tweetボタンを紹介しましたが、そのときから気になっていた素朴なギモン。 HTMLの属性って、勝手に拡張していいの？ Tweetボタンの場合、data-url, data-via, data-text, data-related, data-count のようにHTMLでは未定義（と言っていいのか分かりませんが）の、属性をベタベタ貼って動作させています。 確かに、こうやってJS等で利用する情報を好きに定義して良いなら、かなりラクチンな訳ですが、これはHTML的にはやっても良いの？？とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Firefoxのループ再生対応版 II
A Node in Nodes
NeuStil.com is for sale | HugeDomains
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ