「audio」タグアーカイブ

えっ？Audioえっ？iOSえっ？まさかのボリュームが固定値えっ？【Web Audio API を使ってみる】

webpack

普通にaudioタグではPCはいけてもiOSだと対処できなかった。間近。。。マジカ。。。
そんなときにはコレ！
Getting Started with Web Audio API – HTML5 Rocks
https://www.html5rocks.com/ja/tutorials/webaudio/intro/#toc-volume

javascript – iosでaudioタグを使い音量を制御したいです – スタック・オーバーフロー
https://ja.stackoverflow.com/questions/6838/ios%E3%81%A7audio%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%84%E9%9F%B3%E9%87%8F%E3%82%92%E5%88%B6%E5%BE%A1%E3%81%97%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99

HTML5/jQuery: Adjust audio volume on iPad – Stack Overflow
https://stackoverflow.com/questions/20686738/html5-jquery-adjust-audio-volume-on-ipad

ほんとは、こうして、こうなんだけどね

音量とミュート－JavaScript入門（HTML5編）
https://www.pazru.net/html5/Video/040.html

Stack Overflowって日本語サイトだとfaviconが赤背景に白ロゴなのね・・・へぇ。

というわけで一個目のURLが超オススめ👀だよ！順をおっていくととてもわかり易い！IE11？まだみてないよ！こわい！

[2017.2.23]今週のJS関連

js, ,

忘れてたものから調べたものまで

inputへの入力値の監視

jQueryでテキストボックスの変更を監視/検知する – Qiita
http://qiita.com/maruyam-a/items/cf0168f91d934b449a07

javascriptで数値の入力を自動的にカンマ区切りにする方法 – URAGAMI
http://blog.higty.xyz/archives/547/

まだインラインハック必要だよね

【音声対応】 iPhone Safariで動画をインライン再生する方法続き – Qiita
http://qiita.com/hadakadenkyu/items/b8accc395ccfa8348faf

video要素のループを滑らかにする – Qiita
http://qiita.com/shinnn/items/83c2493ab3bbf49b1949

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

iPhoneでvolumeいじっても値上書きできなかったmutedいじるのならきいたからとりあえずはそれで。私の記法のせいかも。
音量とミュート－JavaScript入門（HTML5編）
http://www.pori2.net/html5/Video/040.html

Promiseってなに、ってとこから///

IE爆発して？
今更だけどPromise入門 – Qiita
http://qiita.com/koki_cheese/items/c559da338a3d307c9d88

爆速でわかるjQuery.Deferred超入門 – Yahoo! JAPAN Tech Blog
https://techblog.yahoo.co.jp/programming/jquery-deferred/

Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する – Qiita
http://qiita.com/kawanamiyuu/items/9312e5d99b2b26bd6074#-%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%E3%81%8Creturn%E3%81%99%E3%82%8Bdeferredpromise%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AEmerge%E9%A0%86%E3%81%8C%E9%80%86

audioまわりメモ スマホとかjsとか

js,

スプライトとかiOS用のユーザーアクションをトリガーとした読み込みとかいろいろ

iOS における HTML5 の audio 要素に関する制約を克服する
https://www.ibm.com/developerworks/jp/web/library/wa-ioshtml5/

ちょっと仕様がセクシーで困る

・iPhoneのHTML5-Audioタグでは、同時に流せる音楽は１音のみ。
・BASIC認証に引っかかって再生できない（スマホのみ）
・Audio.muted(true/false)属性やAudio.volume(0.0～1.0)属性がiphoneでは、設定してもガン無視される

ざ・け・ん・な♡
というわけで私は
BASIC認証→社内IP素通り
消音設定無視→Audio自体を止める
ようにしますた。

iPhoneでのHTML5-Audioは面倒 – maachangの日記
http://d.hatena.ne.jp/maachang/20130115/1358179058

スマホサイトでaudio、videoタグを使う時に気をつけること | SRIA BLOG – 宮城県仙台市のWEBシステム開発・スマホアプリ開発
http://www.sria.co.jp/blog/2014/07/240/

JS制御

読み込み

domに追加しなくてもよいみたい。

//audioの作成
var audio = new Audio('sound.mp3');
//プリロード
var clickButton = function() {
    audio.load();
};
//再生
var play = function() {
    audio.play();
};

止める stopじゃなくてpause

HTML5 Audio stop function – Stack Overflow
http://stackoverflow.com/questions/14834520/html5-audio-stop-function

再生中かどうか pausedというプロパティを確認する

javascript – HTML5 check if audio is playing? – Stack Overflow
http://stackoverflow.com/questions/9437228/html5-check-if-audio-is-playing

その他

FFBlog スマートフォン向けサイトで再生可能な音声ファイルと、audioタグでの注意点 | 株式会社KSK フレックス・ファームビジネスユニット
http://www.flexfirm.jp/blog/article/367