Html5 Audio ボリュームスライダー

ボリュームスライダーも付けときました。

Html

<input type="range" id="VolumeSlider" value="1" min="0" max="1" step="0.1" />

   min: 最小値  max: 最大値  step: 値の間隔を指定

   ボリュームの値は0～1の間で値を指定します。

javascript

var VolumeSlider = document.getElementById("VolumeSlider");

//音量変更
VolumeSlider.addEventListener('change', function(){
    audio.volume = this.valueAsNumber;
}, false);

動画ファイルから音声抽出するソフト(Win)

Mac用の音声抽出ソフトは以前紹介したので、Win版も紹介しときます。

Any Video Converter

Download http://jp.any-video-converter.com/any-video-converter-free.php

AoA Audio Extractor

Download  http://www.aoamedia.com/audioextractor.htm

Super

細かく設定が出来、変換できるファイル形式も多いソフトですが、その分ソフトの動作が重いです。

Download   http://www.erightsoft.com/S6Kg1.html

画像を組み合わせて構築していたHtml5AudioPlayerのUIをCSSを使用して作成し直しました。

それとデータの再生箇所を表示する機能のシークバーを追加しました。

*プレイヤーのレイアウトは崩れますが、IE9でも再生できます。

シークバーの機能を付加するコード

Html

<input type="range" id="SeekBar" disabled="disabled" style="display:none;"/>

Javascript

<script>

var SeekBar = document.getElementById("SeekBar");

function start(url)
{

　　audio.pause();
      audio = new Audio(url);
      audio.play();

      .
      (省略)     
      .


      //非表示だったのを表示させる

      SeekBar.style.display = "block";


        audio.addEventListener('ended', function () {
        .　　　
        (省略)　　　
        .     

        //再生が終了したら再度非表示にする  

        SeekBar.style.display = "none";
    }, true);

　　

　//SeekBarを利用可能にする

   audio.addEventListener('loadedmetadata', function () {
        SeekBar.disabled = false;
        SeekBar.min = SeekBar.value = audio.initialTime || 0;
        SeekBar.max = audio.duration;
    }, false);

    //再生時間に合わせて位置を変更する
   audio.addEventListener('timeupdate', function(){
        SeekBar.value = audio.currentTime;
    }, false);

   //スライダーの値が変化したら、再生位置を変更する
   SeekBar.addEventListener('change', function(){
        audio.currentTime = this.valueAsNumber;
    }, false);

   //再生位置を初期に戻す
   audio.currentTime = audio.initialTime || 0;

</script>

Html5でJavascriptやCSS3のコードによって作成された花火を観る事が出来るサイトです。

自ら作成したコードを投稿する事が出来ます。

http://jsdo.it/event/html5hanabi