OpenPlayerJS - 動画と音楽に対応したメディアプレイヤー
HTML5になってvideo、audioタグが追加されました。これらのタグを使うことで動画や音声ファイルをWebブラウザ上で扱えるようになりましたが、そのUIはとても貧弱です。素のままではとても使いづらいでしょう。 そこで使うのがサードパーティー製のライブラリです。今回はシンプルで軽量なOpenPlayerJSを紹介します。 OpenPlayerJSの使い方 利用例です。ツールはしばらく経つと非表示になります。 動画の速度を変更できます。 音楽だけの再生もできます。こちらもスピード変更が可能です。 OpenPlayerJSは動画再生前の広告再生にも対応しています。字幕表示などの機能はありません。YouTubeなどに比べるとシンプルですが、多くの場合これで十分でしょう。音楽のスピード変更機能は嬉しい人が多そうです。 OpenPlayerJSはTypeScript製のオープンソース・ソフトウェ
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
howler.js - JavaScriptで音声/音楽ファイルを操作 MOONGIFT
HTML5になって音楽ファイルを扱うのが容易になりました。audioタグによって再生や停止をしたり、WebAudio APIでより細かく音声や音楽ファイルを操作できるようになります。しかし、まだまだそれほど活用事例が多くありません。 今回紹介するhowler.jsはJavaScriptベースのオーディオライブラリです。Web上で音を操作するのが簡単になるでしょう。 howler.jsの使い方 音楽プレイヤーの例です。プレイリストにも対応しており、音楽ファイルを再生できます。 ラジオ。つまりストリーミングでの再生です。 オーディオの分割もできます。 howler.jsはMP3以外にもMPEG/OPUS/OGG/OGA/WAV/AAC/CAF/M4A/MP4/WEBA/WEBM/DOLBY/FLACと幅広いフォーマットが扱えます。さらに自動キャッシングによってパフォーマンスやネットワーク帯域を
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
Amplitude.js - HTML5のリッチなUIのオーディオプレイヤー MOONGIFT
HTML5で音楽ファイルを扱うことができるようになりましたが、素の状態では殆どUIが提供されていません。そんな状態で提供しても全く魅力的ではないでしょう。別途UIを作り込む必要があります。 今回紹介するオープンソースソフトウェアはAmplitude.js、HTML5のオーディオプレイヤーです。これを使えば格好良いUIで提供できるでしょう。 Amplitude.jsの使い方 上の再生部分がプレイヤーになります。 マウスオーバーで再生、停止に表示が変わります。 こんな感じです。 サムネイルだけでなく、アルバムの拡大表示もできます。 プレイリストにも対応。 SoundCloudも再生できます。 ビジュアライズも。 シンプルも良いですが、もっとリッチなプレイヤーにもできます。 Amplitude.jsを使えばリッチで使い勝手の良いHTML5のオーディオプレイヤーが簡単に提供できるようになります。も
サーバでvideoやaudioが再生されない時の対応
videoやaudioを使ったサイト作成時に、ローカル環境だと再生できて、サーバにアップすると再生できないということがあったので、対応方法をメモしておきます。 サンプルコード サーバの設定が原因のことが多いみたいなので、.htaccessに以下を追加します。 videoの場合 AddType video/mp4 .mp4 AddType video/webm .webm audioの場合 AddType audio/mpeg .mp3 使用する拡張子に合わせて適宜変更してください。 【参考サイト】 HTML5のVIDEOタグ使用の注意点など / Maka-Veli .com HTML5 Audioの設定方法と各ブラウザの対応状況
APlayer - 歌詞表示に対応したHTML5音楽プレイヤー
ついにFlashが歴史の幕を閉じようとしています（Flash Playerはまだ残っていますが）。つまりこれまでWeb上で使われきたメディアがHTML5によって扱われるようになるのです。 対応しているからといって、単純に動画、音声ファイルをリンクするだけでは誰も再生しません。やはり見栄えのいい再生プレイヤーがあってこそでしょう。今回は音楽プレイヤー、APlayerを紹介します。 APlayerの使い方 デモです。歌詞を表示する機能があります。 歌詞が動いているデモです。 ワイドスタイル。歌詞が表示されない感じで、再生場所が分かります。 そして小型版。こちらはアイコンだけです。 音楽だけであれば小型版、ワイドスタイルが良さそうです。歌があれば歌詞付きが格好いいでしょう。 APlayerはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 APla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
521 Dimensions
.JS web coding memolist
HTML5のaudioで.mp3の音を鳴らす | nanalab *ナナラボ