JavaScriptでAudioを操作する

自分のバンド用に音楽共有サービスを作ってるんだけど、やっぱりwebだけで視聴とかもしたいわけで。
HTML5のaudioタグを使うのも手なんだけど、やっぱりちょっとケータイからは使いづらい。

そこで、Audioクラスを使ってJavaScriptで操作する、みたいなことをやってみることにしたので、その備忘録的なアレ。

とりあえずコーヒー置いときますね

コードに粗があったり汚かったり使い方間違ってたりしたら指摘していただきたく。

class AudioPlayer
  constructor: (el) ->
    @el = $(el)
    @src = @el.find('audio')
    @playButton = @el.find('.play')
    @pauseButton = @el.find('.pause')
    @volumeBar = @el.find('.volume')
    @seekBar = @el.find('.duration')

    @pauseButton.hide()

    @audio = new Audio
    @audio.src = @src.attr('src')
    @audio.volume = 1.0

    @handleAudio()

    @audio.load()
  
  play: (ev) =>
    ev.preventDefault()
    @audio.play()
    @playButton.hide()
    @pauseButton.show()

  pause: (ev) =>
    ev.preventDefault()
    @audio.pause()
    @playButton.show()
    @pauseButton.hide()

  updateCurrentTime: =>
    current = @audio.currentTime
    @seekBar.val Math.ceil(current)

  updateTimeWithEnd: =>
    @seekBar.val(0)
    @audio.currentTime = 0
    @playButton.show()
    @pauseButton.hide()

  changeVolume: =>
    @audio.volume = @volumeBar.val() / 100

  handleAudio: =>
    @playButton.on 'click', @play
    @pauseButton.on 'click', @pause
    @volumeBar.on 'change', @changeVolume
    a = $(@audio)

    a
      .on 'loadeddata', =>
        @seekBar.attr('max', Math.ceil(@audio.duration))
      .on 'timeupdate', =>
        @updateCurrentTime()
      .on 'ended', =>
        @updateTimeWithEnd()

    @seekBar.on 'change', =>
      time = @seekBar.val()
      console.log time
      @audio.currentTime = time

こんな感じで、ちょっとデザインとか整えたりすると、こうなる。

Audioについて説明

Audioクラスは、JavaScriptから音楽ファイルを上手いこと扱うためのもので、例えばplay()とかpause()とかっていうファンクションがある。

audio = new Audio

みたいな感じで使って、

audio.src = "音楽ソースのパス"

で音楽ファイルを指定する。そんで、

audio.play()

とかやってやればなんとなくファイルが再生される、という仕組み。

書き途中だけど眠くなってきたので風呂入って寝る。（でも公開はする