Ruby on Rails — Audio uploader 音頻上傳
http://johnliutw.logdown.com/posts/3280338
會有這篇文章的起源是,本來需求端只需要上傳圖片,
但是因為檔案類型彈性調整的要求,所以就需要也接受 mp3 音檔的上傳。
那這邊我也是運用強大的 carrierwave 服務,上傳圖片功能的安裝請參考此
Step1
Gemfile 裡加上 :
gem ‘carrierwave-audio’
Step2
跟 Image upload 功能相同,也有運用第三方套件來協助此功能,
這邊引用的是 sox 這個老牌的音頻轉檔軟體,有兩種下載方法
1.使用 terminal(mac)
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null
再來用 homebrew
brew install sox
2.SourceForge下載檔案
SourceForge 有提供檔案供下載:
https://sourceforge.net/projects/sox/files/sox/14.3.2/
Step3
再來在 Termainal 裡 bundle 安裝
bundle install
Step4
我想要放在同一個 rb 檔裡管理,原始檔案如下:
# encoding: utf-8 class ImageUploader < CarrierWave::Uploader::Base # Include RMagick or MiniMagick support: # include CarrierWave::RMagick include CarrierWave::MiniMagick # Choose what kind of storage to use for this uploader: storage :file # storage :fog # Override the directory where uploaded files will be stored. # This is a sensible default for uploaders that are meant to be mounted: def store_dir “uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}” end # Provide a default URL as a default if there hasn’t been a file uploaded: # def default_url # # For Rails 3.1+ asset pipeline compatibility: # # ActionController::Base.helpers.asset_path(“fallback/” + [version_name, “default.png”].compact.join(‘_’)) # # “/images/fallback/” + [version_name, “default.png”].compact.join(‘_’) # end # Process files as they are uploaded: # process :scale => [200, 300] # # def scale(width, height) # # do something # end # Create different versions of your uploaded files: version :thumb do process :resize_to_fit => [50, 50] end # Add a white list of extensions which are allowed to be uploaded. # For images you might use something like this: def extension_white_list %w(jpg png) end # Override the filename of the uploaded files: # Avoid using model.id or version_name here, see uploader/store.rb for details. # def filename # “something.jpg” if original_filename # end end
這邊就能直接 include CarrierWave audio的服務,
再來我要判斷傳進來的檔案類型,來作不同的檔案命名配置服務,
所以會設定兩個 protected 層級的 method ,來替我判斷檔案類型。
最後在白名單清單中,新增 mp3,就完成了 model 層所有 function 的建置。
# encoding: utf-8 class ImageUploader < CarrierWave::Uploader::Base # Include RMagick or MiniMagick support: # include CarrierWave::RMagick include CarrierWave::MiniMagick include CarrierWave::Audio # Choose what kind of storage to use for this uploader: storage :file # storage :fog # Override the directory where uploaded files will be stored. # This is a sensible default for uploaders that are meant to be mounted: def store_dir “uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}” end # Provide a default URL as a default if there hasn’t been a file uploaded: # def default_url # # For Rails 3.1+ asset pipeline compatibility: # # ActionController::Base.helpers.asset_path(“fallback/” + [version_name, “default.png”].compact.join(‘_’)) # # “/images/fallback/” + [version_name, “default.png”].compact.join(‘_’) # end # Process files as they are uploaded: # process :scale => [200, 300] # # def scale(width, height) # # do something # end # Create different versions of your uploaded files: version :thumb, :if => :image? do process :resize_to_fit => [50, 50] end version :mp3, :if => :audio? do process :convert => [{output_format: :mp3}] def full_filename(for_file) “#{super.chomp(File.extname(super))}.mp3” end end # Add a white list of extensions which are allowed to be uploaded. # For images you might use something like this: def extension_white_list %w(jpg png mp3) end # Override the filename of the uploaded files: # Avoid using model.id or version_name here, see uploader/store.rb for details. # def filename # “something.jpg” if original_filename # end protected def image?(new_file) new_file.content_type.include? ‘image’ end def audio?(new_file) new_file.content_type.include? ‘audio’ end end
Step5
最後在前端可以直接引用 url ,並套 tag,讓其能顯示:
<audio controls> <source src=”<%= @question.title_attr.url %>” type=”audio/mpeg”> </source> </audio>