Railsでaudioの再生回数をカウントする方法

問題点

今作り込み中のRails webアプリでは、html内で音声ファイルを再生するaudioタグを使っているのですが、ただ音声ファイルaudio要素から再生するだけでは何回再生されたかカウント出来ません。YoutubeでもSoundCloudでも何回再生されたかはユーザーの大きなモチベーションにつながるので非常に大事なポイントです。

解決策

再生回数をカウントするフィールドをモデルに追加し、audio要素からの再生をjavascriptで制御し、再生する度にcontrollerが起動し再生回数をカウントしていく方法にしました。

実装

下記の例はMusicというモデルに再生回数をカウントするlistenというフィールドを追加して実装したものです。

音声ファイルを置いてあるviewをこんな感じにします。

<button type="button" class="btn btn-success js" onclick="play()">　Play　</button>
<button type="button" class="btn btn-warning" onclick="pause()">PAUSE</button>
<button type="button" class="btn btn-secondary" onclick="reset()">RESET</button><br />
<%= audio_tag  @music.url, :controls => true, id: @melody.id %>　再生回数<span class="count"><%= @melody.listen %></span>

var TARGET = document.getElementById("<%=@melody.id %>");

function play(){
    TARGET.play();
}

function pause(){
    TARGET.pause();   
}

function reset(){
    TARGET.pause();
    TARGET.currentTime = 0;
}

これでボタンを押せばjavascriptが作動してPlay,Pause,Resetしてくれます。
さらに

routes.rbに下記を追加。

  get 'increment.json',to: 'melodies#increment'

melodyのcontrollerで

   
  def increment
    @melody = Melody.find(params[:id])
    @melody.listen += 1
    @melody.save
  end

として、さきほどのjavascriptに下記を追加。

 $(document).ready(function() {  
$(".js").click(function() {  
$.ajax({
    url: '/increment.json',
    data: { id : "<%= @melody.id %>" },
    async: false
});
});
});

とすれば、Playボタンをクリックした時にAjaxでmelody#incrementメソッドが起動して、再生回数listenに１づつ追加されていきます。

欠点はPlayを連打されると再生回数が膨れ上がることですねw

とりあえず今ある知識でできたのはこれだけ！後々改良考えます。良い方法あれば教えて下さい！