ben

OMÜ , Bilgisayar Mühendisliği, 13'

27 Ekim 2016 Perşembe

Clodinary mp3

Cloduniarye daha önce resim yuklemiştik, kendi projemden dolayı mp3 yuklemem gerekti ve  araştırma kısmı biraz vaktımı aldı. Aslında  resim yuklemeden cokda bir farkı yokmuş.  Deneme yanılma bulduk çok şükür.

Klasik adımları buraya yazalım:

gemfile:

gem 'carrierwave'
gem 'cloudinary'

config altına https://cloudinary.com/console sitesindeki ayarları yml olarak indirip  config klasoru altına alalım

clodinary:



rails app:




app/uploaders/sound_uploader.rb

# encoding: utf-8
class SoundUploader < CarrierWave::Uploader::Base

   include Cloudinary::CarrierWave
    process :convert => 'mp3'


end

app/model/voice.rb

class Voice < ActiveRecord::Base
      mount_uploader :sound, SoundUploader
end


app/view/voices/_form.html.erb

<%=simple_form_for...
..
..
   <div class="row form-group">
      <label class="control-label col-md-4 col-sm-4 col-xs-4">Ses Dosyası</label>
         <div  class="col-md-8 col-sm-8 col-xs-8" >
             <input readonly="" class="form-control floating-label" placeholder="Browse to mp3..." type="text">
                        <%=l.file_field :sound %>
         </input>
                    </div>
                  </div>

<%end%>




Formu kaydettiğimizde Clouniarye gönderilmiş oluyor. Clodunary de nerde derseniz Media Library sekmesine tıklayıp, üst bölümden video&audio 'a tıklarsanız muzik yada ses dosyalarınızın yuklendiğini görürsünüz. 

Peki ses dosyasını nasıl proje içinden çalacağız:


view.html.erb
  
<audio id="ses">
        <source src="<%=voice.sound.url%>" type="audio/mp3">
   </audio>

birde oynat butonu koyalım:
 <a href="#"  onclick="aud_play_pause()"  id="play">
            <i class="fa fa-play"></i> Oynat
 </a>


<script type="text/javascript">
      function aud_play_pause() {
        var myAudio = document.getElementById("ses");
       myAudio.play();
      }
</script>


Birden fazla ses dosyası yonetimi yada bir mp3 player yapmak için buradaki yazıya gidiniz.

Hiç yorum yok: