rails sound player

Projemiz üzerinde bulunan ses/mp3 dosyalarını mp3 player gibi çalmak, durdurmak yada ileri geri sarmak için aşağıdaki yolu izleyelim.

Elimizde aynı ekranda birden fazla ses/mp3 dosyası oldugunu varsayarak herbir dosyaya veritabanındaki kayıtlı id sine göre id vermek durumundayım. Ve birazda javascript tarafında elimizi kirletmemiz gerekiyor.

Ses dosyalarının listelendiği index.html de olup bitiyor herşey. Aslinda kod kalabalığı yapmaması açısından herbir satıra ses iconu koyalım ve buna tıkladığında modal box üzerinden oyantma düğmeleri açılsın. Görünüm açısından daha güzel görünecektir. Kod bakımındanda daha okunabilir.

Burdaki iconlara bastıgımızda modal box üzerinden  ses dosyamızı çalacağımız düğmelerimiz gelecek 

Şimdi gelelim kodlara. Öncelikle  index.html deki listemizdeki ilgi alanı yazalım

   <a href="#" data-toggle="modal" data-target=".voice<%=voice.id%>"><i class="fa fa-play-circle-o fa-lg " aria-hidden="true"></i></span></a>
         <div class="voice<%=voice.id%>" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-md">
                  <div class="modal-content">
                     <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> </button>
                      <h4 class="modal-title" id="myModalLabel">Rapor Ses Dosyası</h4>
                      </div>
                      <div class="modal-body">
                              <%=render "voicefile", voice: voice%>
                        </div>
                   </div>
                  </div>
               </div>

_voicefile.html.erb



<div class="panel-heading" >
     Ses Dosyası
   </div>
   <div class="panel-body" align="center">

      <audio id="ses<%=voice.id%>">
        <source src="<%=voice.url%>" type="audio/mp3">
      </audio>
       <a href="#"  class="btn btn-app" onclick="aud_backward(<%=voice.id%>)">
           <i class="fa fa-backward"></i> Geri
       </a>
       <a href="#"  class="btn btn-app"  onclick="aud_play_pause(<%=voiceid%>)" id="play<%=voice.id%>">
            <i class="fa fa-play"></i> Oynat
      </a>
      <a href="#"  class="btn btn-app" onclick="aud_play_pause(<%=voice.id%>)" style="display: none;" id="pause<%=voice.id%>">
          <i class="fa fa-pause"></i> Durdur
      </a>
      <a href="#"  class="btn btn-app"  onclick="aud_forward(<%=voice.id%>);">
          <i class="fa fa-forward"></i> İleri
      </a>
      <a href="#"  class="btn btn-app" onclick="aud_reload(<%=voice.id%>);">
          <i class="fa fa-repeat"  ></i> Yenile
      </a>
   </div>

</div>

<script type="text/javascript">

function aud_play_pause(id) {

      var audiolist= document.getElementsByTagName('audio');

      for (var i = 0; i < audiolist.length; i++) {

        var sid=audiolist[i].id.replace("ses","");

        if( sid!=id)

        {

          audiolist[i].pause();

          var btnplay = document.getElementById("play" + sid);

          var btnpause = document.getElementById("pause" + sid);

          btnplay.style.display = '';

          btnpause.style.display = 'none';

         }

      }

      var myAudio = document.getElementById("ses"+id);

      var btnplay = document.getElementById("play"+id);

      var btnpause = document.getElementById("pause"+id);

      if (myAudio.paused) {

        myAudio.play();

        btnplay.style.display = 'none';

        btnpause.style.display = '';

       } else {

        myAudio.pause();

        btnplay.style.display = '';

        btnpause.style.display = 'none';

       }

    }

   function aud_reload(id) {

     var myAudio = document.getElementById("ses"+id);

     myAudio.load();

     myAudio.play();

     var btnplay = document.getElementById("play" + id);

     var btnpause = document.getElementById("pause" + id);

     btnplay.style.display = 'none';

     btnpause.style.display = '';

   }

    function aud_forward(id) {

      var myAudio = document.getElementById("ses" + id);

      myAudio.currentTime += 30.0;

    }

    function aud_backward(id) {

      var myAudio = document.getElementById("ses" + id);

      myAudio.currentTime -= 30.0;

    }

</script>