Erstellen einer einfachen Musik-Streaming-Anwendung mit Ruby on Rails

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Amazon S3 ist eine großartige Möglichkeit, Dateien zu speichern, aber es kann eine Herausforderung sein, zu lernen, wie man sie in Ihre Website integriert. In diesem Artikel erfahren Sie, wie Sie Amazon S3 und Ruby on Rails durch die Erstellung einer einfachen Musik-Streaming-Anwendung integrieren.

Was ist das und wie funktioniert es?

Amazon S3 ist "Speicher für das Internet"

Laut der Amazon-Website ist Amazon S3 "Speicher für das Internet". Es ist nicht nur kostengünstig, sondern auch schnell und zuverlässig. Auf diese Weise können Sie Inhalte auf Ihrer Website bereitstellen, einschließlich Bilder, Videos oder so ziemlich alles, was Sie möchten. Amazon S3 funktioniert nicht genau wie der Speicher auf Ihrem Computer. Hier sind einige Dinge, die Sie wissen sollten:

In Amazon S3 werden Ordner als "Buckets" und Dateien als "Objekte" bezeichnet.
Buckets auf der obersten Ebene werden verwendet, um die URL für den Zugriff auf Ihre Daten zu bestimmen. Sie können also nur Namen verwenden, die noch nicht vergeben wurden. Wenn beispielsweise bereits jemand einen Bucket der obersten Ebene mit dem Namen "Videos" erstellt hat, können Sie diesen Namen nicht verwenden.
Es ist eine gute Idee, einen Bucket der obersten Ebene mit dem Namen Ihrer Website zu haben und untergeordnete Bucket-Stufen zu verwenden, um Dateien in verschiedene Abschnitte wie Bilder, Videos oder Musik zu unterteilen.

Bevor wir anfangen...

Bevor Sie mit diesem Tutorial fortfahren, sollten einige wichtige Dinge vorhanden sein:

Der auf Ihrem Computer installierte Ruby-Interpreter und RubyGems sowie das Rails-Juwel
Kenntnis Ihrer Zugriffsschlüssel-ID und Ihres geheimen Zugriffsschlüssels für Amazon S3 (oder zumindest Zugriff darauf)
Ein grundlegendes Verständnis von Ruby on Rails

Was werden wir erstellen?

Das Endprodukt dieses Tutorials ist eine einfache Musik-Streaming- und Download-Anwendung. In dieser Anwendung kann der Benutzer Folgendes tun:

Zeigen Sie eine Liste aller aktuell hochgeladenen Musikdateien an und laden Sie die Musik selbst hoch
Laden Sie die Musik auf verschiedene Arten herunter, einschließlich Streaming mit HTML5-Audio, Herunterladen über HTTP oder Herunterladen über eine Torrent-Datei

Bis zum Abschluss dieser Anwendung haben Sie alle wichtigen Themen kennengelernt, die Sie über die Verwendung von Amazon S3 in Ihrer Ruby on Rails-Anwendung wissen müssen.

Lassen Sie uns anfangen!

Das aws-s3 gem ermöglicht Ihnen die Interaktion mit dem Amazon S3-Dienst in Ihrer Anwendung.

Das erste, was Sie tun müssen, ist die Installation des aws-s3 Ruby Gem. Mit dem gem können Sie mit dem Amazon S3-Dienst in Ihrer Anwendung interagieren. Wenn Sie unter Windows arbeiten, führen Sie dazu einfach den folgenden Befehl aus:

1	gem install aws-s3

Generieren Sie nach der Installation unsere Rails-Anwendung mit dem folgenden Befehl:

1	rails new mp3app

Der letzte Schritt, um Ihre Anwendung zu starten, besteht darin, in das Verzeichnis mp3app/public zu wechseln und die Datei "index.html" zu löschen. Sobald dies abgeschlossen ist, kann Ihre Anwendung mit Amazon S3 interagieren!

Anmelden bei Amazon S3

Mit Ihrer Zugangsschlüssel-ID und Ihrem geheimen Zugangsschlüssel können Sie eine Verbindung zu Amazon S3 herstellen.

Damit wir mit Amazon S3 interagieren können, müssen wir unserer Anwendung mitteilen, wie sie sich bei Amazon S3 anmelden soll. Hier bieten sich Ihre Zugangsschlüssel-ID und Ihr geheimer Zugangsschlüssel an. Mit Ihrer Zugangsschlüssel-ID und Ihrem geheimen Zugangsschlüssel können Sie eine Verbindung zu Amazon S3 herstellen. Aber zuerst müssen wir unserer Anwendung mitteilen, dass wir das Juwel aws-s3 verwenden. Wir machen das in der Gemfile:

1	gem 'aws-s3', :require => 'aws/s3'

Damit unsere Anwendung dieses gem tatsächlich verwenden kann, müssen Sie command bundle install. Jetzt, da es funktioniert, müssen wir unserer Anwendung mitteilen, wie sie sich bei Amazon S3 anmelden soll. Wir tun dies auch in der Datei config/application.rb in einer neuen Zeile innerhalb der Application-Klasse:

1	AWS::S3::Base.establish_connection!(
2	:access_key_id => 'Put your Access Key ID here',
3	:secret_access_key => 'Put your Secret Access Key here'
4	)

Dieser Code weist unsere Anwendung an, eine Verbindung zu Amazon S3 herzustellen, sobald die Anwendung gestartet wird (die Datei application.rb wird beim Start Ihrer Anwendung geladen). Eine letzte Sache, die der Anwendungsdatei hinzugefügt werden muss, ist eine Konstante mit dem Wert des Buckets, den wir verwenden werden. Der Grund dafür ist, dass wenn wir jemals ändern müssen, welchen Bucket wir verwenden, er nur an diesem einen Ort aktualisiert werden muss. Es sollte ungefähr so aussehen:

1	BUCKET='s3tutorialmusic'

Für dieses Tutorial habe ich beschlossen, den Bucket s3tutorialmusic zu benennen, aber Sie sollten diesen durch den Bucket ersetzen, den Sie auf Ihrem Konto haben. Am Ende sollte Ihre Datei ungefähr so aussehen (aber mit Ihren eigenen Anmeldeinformationen):

require File.expand_path('../boot', __FILE__)

require 'rails/all'

Bundler.require(:default, Rails.env) if defined?(Bundler)

module Mp3app
  class Application < Rails::Application
    config.encoding = "utf-8"
    config.filter_parameters += [:password]

    AWS::S3::Base.establish_connection!(
      :access_key_id     => 'Put your Access Key ID Here',
      :secret_access_key => 'Put your Secred Access Key here'
    )

    BUCKET = 's3tutorialmusic'

  end
end

Controller generieren

Jetzt können wir endlich daran arbeiten, dass unsere Anwendung tatsächlich etwas im Browser anzeigt. Lassen Sie uns zunächst den Controller und die Ansichten generieren, die wir benötigen. Insgesamt werden wir drei Aktionen für unseren Controller generieren (die wir Songs nennen werden): index, upload und delete.

Die Indexaktion wird unsere Hauptseite sein.
Die Upload-Aktion dient zum Hochladen neuer Musik auf Amazon S3, sodass keine Ansicht erforderlich ist.
Schließlich hat die Löschaktion keine Ansicht und ist für das Löschen von Musik verantwortlich.

Letztendlich ist die einzige Ansicht, die wir für diese Anwendung benötigen, die Indexansicht, da sie als zentrales Kontrollfeld für jede Aktion fungiert, die Sie ausführen können. Jetzt kombinieren wir das alles in einer netten Befehlszeilenanweisung:

1	rails g controller Songs index upload delete

Sobald dies ausgeführt wurde, löschen Sie die zum upload und delete generierten Ansichten, da sie nicht verwendet werden. Fahren wir mit dem Schreiben des Codes für die Indexaktion fort!

Arbeiten an der Indexaktion

In der Indexaktion können Benutzer mit dem fertigen Produkt neue Musik hochladen und vorhandene Musik löschen. In der Controller-Datei dieser Aktion muss nichts getan werden, um neue Musik hochzuladen. Wir benötigen jedoch eine Liste der aktuellen Songs, damit Benutzer sie löschen können.

Zuerst müssen wir ein Objekt erhalten, das sich auf unseren Musik-Bucket bezieht (denken Sie daran, dass der Name dieses Buckets in der Konstante BUCKET gespeichert ist). So machen wir das:

1	AWS::S3::Bucket.find(BUCKET)

Damit wir die im gem aws-s3 verfügbaren Methoden verwenden können, müssen wir dem Ruby-Interpreter mitteilen, dass wir nach den Funktionen im AWS::S3-Namespace suchen möchten, weshalb dies Teil des Methodenaufrufs ist. Die Bucket-Klasse enthält alle Methoden zum Bearbeiten von Buckets. Schließlich akzeptiert die find-Methode einen Parameter, den Namen des Buckets, und gibt ein Objekt zurück, das auf diesen Bucket verweist. Nachdem wir den Eimer haben, können wir alle seine Objekte auf folgende Weise abrufen:

1	AWS::S3::Bucket.find(BUCKET).objects

Die objects-Methode gibt einen Hash mit den Namen aller Objekte in diesem Bucket zurück. Schließlich müssen wir das Ergebnis dieses Methodenaufrufs in einer Instanzvariablen speichern, damit wir es in unserer Ansicht verwenden können. Am Ende sieht die Indexaktion folgendermaßen aus:

1	def index
2	@songs = AWS::S3::Bucket.find(BUCKET).objects
3	end

Fahren Sie mit der Indexansicht fort

Jetzt müssen wir die Ansicht für den Benutzer erstellen, um Musik hochzuladen und zu löschen. Beginnen wir mit dem späteren und erstellen eine ungeordnete Liste aller aktuell hochgeladenen Objekte mit einem Link zum Löschen dieses Objekts. Wir können das so machen:

<ul>
<% @songs.each do |song| %>
   <li><%= song.key %> - <%= link_to "Delete",  "songs/delete/?song=" + song.key, :confirm => 'Are you sure you want to delete ' + song.key + '?' %></li>
<% end %>
</ul>

Zuerst erstellen wir eine ungeordnete Liste.
Anschließend durchlaufen wir alle Songs in der Variablen @songs mithilfe der jeweiligen Methode.
Für jedes Lied erstellen wir ein Listenelement und erstellen den Text, der für jedes Element angezeigt wird. Der erste Teil ist der Songschlüssel, da jeder Song ein Hash ist und der Schlüssel für diesen Hash der Name des Songs ist.
Dann setzen wir einen Link zur Löschaktion, wo das Lied gelöscht werden kann. Für die URL verwenden wir am Ende eine Abfragezeichenfolge, um der Löschaktion mitzuteilen, welches Lied gelöscht werden muss.
Schließlich haben wir eine Bestätigungsmeldung, um den Benutzer zu warnen, bevor er das Lied tatsächlich löscht.

if (params[:song])
    AWS::S3::S3Object.find(params[:song], BUCKET).delete
    redirect_to root_path
else
    render :text => "No song was found to delete!"
end

Zuerst überprüfen wir, ob der Song-Parameter angegeben wurde.
Wenn ja, verwenden wir die find-Methode, um das Objekt abzurufen, das dieses Lied darstellt.
Schließlich verwenden wir die Löschmethode, um es aus Amazon S3 zu löschen.
Danach müssen wir den Benutzer auf eine neue Seite umleiten, da die Löschaktion keine Ansicht hat. Wenn der Song-Parameter jedoch nie angegeben wurde, wird nur der Text "Es wurde kein zu löschender Song gefunden!" Gerendert.

Lassen Sie den Benutzer Musik hochladen

Jetzt müssen wir den Benutzer tatsächlich Musik hochladen lassen, da dies eine der Kernfunktionen für diese Anwendung war. Zunächst erstellen wir ein einfaches Formular, mit dem der Benutzer eine Datei zum Hochladen auswählen kann. Wir können das so machen:

<h2>Upload a new MP3:</h2>
<%= form_tag upload_path, :method => "post", :multipart => true do %>
    <%= file_field_tag "mp3file" %>
    <%= submit_tag "Upload" %>
<% end %>

Wir erstellen ein Formular, das an die Upload-Aktion gesendet wird. Dies ist die Aktion, die den Upload auf Amazon S3 tatsächlich ausführt. Wir verwenden Post und Multipart, weil wir Dateien einreichen. Abgesehen davon ist dieses Formular sehr einfach und leicht zu verstehen, sodass wir jetzt mit der Implementierung des Controller-Teils dieser Aktion fortfahren können.

Senden der Datei an Amazon S3

Wir müssen die übermittelte Datei nehmen und ein neues S3-Objekt dafür erstellen, das in der Upload-Aktion ausgeführt wird. Wir können das mit dieser Codezeile machen:

1	AWS::S3::S3Object.store(sanitize_filename(params[:mp3file].original_filename), params[:mp3file].read, BUCKET, :access => :public_read)

In dieser einen Codezeile ist viel los, daher werde ich jeden Teil einzeln erklären.

Wie üblich greifen wir auf das AWS::S3::S3Object zu, um mit Objekten in Amazon S3 zu interagieren.

Wir verwenden den Befehl store, um Dateien tatsächlich in S3 hochzuladen. Der erste Parameter gibt an, wie die Datei aufgerufen werden soll. Wir verwenden dazu den Parameter original_filename der hochgeladenen Datei, damit der Name gleich bleibt. Die Methode sanitize_filename wird im nächsten Absatz erläutert. Der zweite Parameter sind die tatsächlichen Dateidaten, die durch Aufrufen der Lesemethode für die hochgeladene Datei erhalten werden. Der dritte Parameter gibt den zu verwendenden Bucket an und der vierte bestimmt, wer auf die Datei zugreifen kann. Da wir möchten, dass jeder die Datei lesen kann (einschließlich Herunterladen), geben wir den Zugriff wie folgt an :public_read.

Die Methode sanitize_filename ist eine Methode, die von vielen Personen und Plugins verwendet wurde, z. B. attachment_fu. Sie wird verwendet, um ein Problem mit Internet Explorer zu lösen (schockierend, nicht wahr?). Anstatt uns nur den Namen der Datei zu geben, wenn wir die Methode original_filename aufrufen, gibt der IE den gesamten Pfad zur Datei zurück. Wenn die Datei, die wir hochladen wollten, beispielsweise mysong.mp3 heißt, erhalten wir stattdessen C:\rails\mp3app\mysong.mp3, wenn wir original_filename aufrufen. Wir können dies beheben, indem wir den folgenden Code am Ende des Controllers hinzufügen:

private

def sanitize_filename(file_name)
    just_filename = File.basename(file_name)
    just_filename.sub(/[^\w\.\-]/,'_')
end

Unser letzter Schritt zum Abschließen der Upload-Aktion besteht darin, einige Fehlerprüfungen und Routen hinzuzufügen. Die Art und Weise, wie Sie Fehler in Ruby überprüfen, ist mit einer begin...rescure...end-Anweisung. Beim Hochladen einer Datei können viele Dinge schief gehen. Wenn Sie also eine Fehlerprüfung durchführen, wird dem Benutzer nicht angezeigt, dass eine Fehlermeldung angezeigt wird, die Rails automatisch generiert. Hier ist die geänderte Version der Upload-Aktion:

def upload
	begin
		AWS::S3::S3Object.store(sanitize_filename(params[:mp3file].original_filename), params[:mp3file].read, BUCKET, :access => :public_read)
		redirect_to root_path
	rescue
		render :text => "Couldn't complete the upload"
	end
end

Wenn ein Fehler auftritt, rendern wir nur einen Text, der dem Benutzer dies mitteilt. Obwohl der Benutzer immer noch eine Fehlermeldung sieht, ist diese besser als eine große Liste von Code, die in einer von Rails generierten Fehlermeldung angezeigt wird.

Weiterleiten unserer Anwendung

Möglicherweise haben Sie bemerkt, dass im gesamten Code, den wir bisher geschrieben haben, häufig so etwas wie upload_path anstelle der Angabe eines Controllers und einer Aktion verwendet wurde. Wir können dies aufgrund einer Datei namens route.rb tun. Dies teilt unserer Anwendung mit, auf welche URLs in unserer Anwendung zugegriffen werden kann. Wir geben auch bestimmten Pfaden Namen, um die Aktualisierung unseres Codes zu vereinfachen. So können Sie die Pfade benennen, die unsere MP3-App verwenden wird:

1	match "songs/upload", :as => "upload"
2	match "songs/delete", :as => "delete"
3
4	root :to => "songs#index"

Die Übereinstimmungsmethode gibt einen Pfad wie songs/upload an und gibt ihm den Namen upload_path. Dieser Name wird angegeben mit: as => "name" als zweitem Parameter der Übereinstimmungsmethode. Schließlich gibt die Root-Methode an, welche Aktion die Root-Aktion sein soll, die sich ähnlich wie index.html in einer statischen HTML-basierten Website verhält.

Die abgeschlossene Upload-Aktion

Jetzt sind wir mit der Implementierung der Funktionalität der Upload-Aktion fertig. Hier ist der endgültige Code für die Datei songs_controller.rb:

class SongsController < ApplicationController
  def index
    @songs = AWS::S3::Bucket.find(BUCKET).objects
  end

  def upload
    begin
      AWS::S3::S3Object.store(sanitize_filename(params[:mp3file].original_filename), params[:mp3file].read, BUCKET, :access => :public_read)
      redirect_to root_path
    rescue
      render :text => "Couldn't complete the upload"
    end
  end

  def delete
    if (params[:song])
      AWS::S3::S3Object.find(params[:song], BUCKET).delete
      redirect_to root_path
    else
      render :text => "No song was found to delete!"
    end
  end

  private

  def sanitize_filename(file_name)
    just_filename = File.basename(file_name)
    just_filename.sub(/[^\w\.\-]/,'_')
  end

end

Und so sieht die Anwendung bisher aus, wenn sie im Browser angezeigt wird.

Musik herunterladen

Bisher hat unsere Anwendung einen langen Weg zurückgelegt. Der Benutzer kann jetzt Musik hochladen, eine Liste der aktuell hochgeladenen Musik anzeigen und vorhandene Musik löschen. Jetzt müssen wir noch eine letzte Kernfunktionalität implementieren. Dadurch kann der Benutzer diese Musik tatsächlich herunterladen. Wie zu Beginn dieses Tutorials angegeben, kann der Benutzer dies auf drei Arten tun:

es mit HTML5 Audio streamen,
sie über HTTP herunterladen, und
es mit einer Torrent-Datei herunterladen.

Im Moment wird die Liste der Musik nur mit einer ungeordneten Liste angezeigt. Da wir jedoch am Ende jeder Zeile drei zusätzliche Links hinzufügen werden (einen für jede Download-Methode), ist es praktikabler, eine Tabelle zum Organisieren der Liste zu verwenden. Lassen Sie uns die Indexansicht ändern, um diese Änderung widerzuspiegeln:

<h2>Download and Delete Existing MP3's</h2>
<table>
<% @songs.each do |song| %>
    <tr>
        <td><%= song.key %></td>
        <td><%= link_to "Delete",  "songs/delete/?song=" + song.key, :confirm => 'Are you sure you want to delete ' + song.key + '?' %></td>
    </tr>
<% end %>
</table>

Zuerst aktualisieren wir den Header, um zu berücksichtigen, dass wir die Musik auch herunterladen können.
Zweitens ändern wir die ungeordnete Liste in eine Tabelle und setzen den Namen des Songs und den Download-Link auf ihre eigene <td>.

Jetzt können wir den Code hinzufügen, damit der Benutzer Musik herunterladen kann. Beginnen wir mit dem Herunterladen über HTTP, da es am einfachsten zu implementieren ist.

Herunterladen über HTTP

Zum Herunterladen über HTTP müssen wir unserer Tabelle lediglich ein neues <td> mit einem Link zur MP3-Datei hinzufügen. Das gem aws-s3 verfügt über integrierte Methoden, mit denen wir die URL für eine Datei generieren können. Die beste Vorgehensweise besteht jedoch darin, solche "Hilfsmethoden" wie diese in die Hilfsdatei für diesen Controller aufzunehmen. Da wir diese Methoden in der gesamten Anwendung verwenden (insbesondere, wenn Sie diese Anwendung selbst erweitern möchten), werden die Hilfsmethoden in der application_helper.rb file abgelegt. So erhalten Sie die URL:

1	def download_url_for(song_key)
2	AWS::S3::S3Object.url_for(song_key, BUCKET, :authenticated => false)
3	end

Diese Methode akzeptiert nur einen Parameter, nämlich den Namen des Songs. Um uns daran zu erinnern, dass auf song.key auf den Namen des Songs zugegriffen wird, rufen wir den Parameter song_key auf. Wie üblich greifen wir auf die AWS::S3::S3Object-Klasse zu, um mit Amazon S3-Objekten zu interagieren. Die Methode url_for verwendet zwei Parameter, wobei der dritte optional ist.

Der erste ist der Name der gesuchten Datei.
Der zweite ist der Name des Buckets, in dem sich die Datei befindet.
Schließlich wird der dritte Parameter verwendet, um uns eine URL zu geben, die nicht abläuft. Wenn wir nicht angeben :authenticated => false, laufen alle URLs in 5 Minuten ab(standardmäßig).

1	<td><%= link_to "Download", download_url_for(song.key) %></td>

Dieses <td> steht zwischen dem Namen des Songs und dem Löschlink (dies ist jedoch eine persönliche Präferenz, sodass Sie die Links in beliebiger Reihenfolge haben können).

Herunterladen über Bit Torrent

Das Herunterladen von Dateien von Amazon S3 über Bit Torrent ist dem Herunterladen über HTTP sehr ähnlich. Tatsächlich besteht der einzige Unterschied zwischen den beiden Download-URLs darin, dass der Torrent am Ende einen Torrent hat. Daher fügt unsere Hilfsmethode zum Generieren der Torrent-URL nur Torrent am Ende der HTTP-URL hinzu. So würden Sie das machen:

1	def torrent_url_for(song_key)
2	download_url_for(song_key) + "?torrent"
3	end

Jetzt müssen wir nur noch ein <td> zu unserer Tabelle hinzufügen:

1	<td><%= link_to "Torrent", torrent_url_for(song.key) %></td>

Streaming mit HTML5 Audio

Das Streamen der Songs über HTML5-Audio ist etwas schwieriger als nur das Herunterladen des Songs. Beginnen wir also mit dem einfachen Teil: dem <td> dafür. Es wird jedoch einige Unterschiede zu den Links geben, die wir für HTTP und Bit Torrent hinzugefügt haben.

Zuerst müssen wir eine Möglichkeit haben, diesen Link zu identifizieren, um das <audio>-Tag zur Seite hinzuzufügen, damit wir ihm eine Klasse von html5 geben können.
Zweitens müssen wir die Quelle des MP3s kennen, die für das <source> -Tag verwendet werden soll. Daher geben wir ihm nur dieselbe URL wie dem HTTP-Download. Dies dient auch als Fallback für Browser mit deaktiviertem Javascript, da wir Javascript verwenden, um das <audio>-Tag zur Seite hinzuzufügen.

Hier ist der Code zum Generieren des Links:

1	<td><%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5" %></td>

Jetzt müssen wir am Javascript arbeiten, um das Audio-Tag zur Seite hinzuzufügen, wenn auf diesen Link geklickt wird. Dazu verwenden wir eine Technik, die der Technik ähnelt, die Jeffrey Way in seinem Tutorial The HTML 5 Audio Element verwendet. Der erste Schritt besteht darin, unseren Ansichtsdateien einige Dinge hinzuzufügen. In unsere Datei layout/application.html.erb müssen wir die neueste Version von jQuery aufnehmen, da dies die Javascript-Bibliothek ist, die wir verwenden werden. Hier ist der Code, der unmittelbar vor der ersten Javascript-Include-Zeile hinzugefügt werden muss:

1	<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>

Ändern Sie dann den ersten Parameter für das ursprüngliche Include-Tag von: default in application.js, da dort unser Javascript-Code gespeichert wird und die anderen Standard-JavaScript-Dateien nicht erforderlich sind. Als Nächstes müssen wir unserer index.html.erb-Ansicht einen Abschnitt hinzufügen, um das Audio-Tag einzufügen. Oben in dieser Ansicht müssen wir den folgenden Code einfügen:

1	<h2>Listen to a MP3 with HTML5 Audio</h2>
2	<section id="audio">
3	</section>

Im Anschluss an das HTML5-Thema verwenden wir ein Abschnitts-Tag anstelle eines div, um unseren Audio-Abschnitt zu erstellen.

Wir erhalten einen Verweis auf den Audioabschnitt und speichern ihn in einer Variablen, die als Best Practice angesehen wird. Als Nächstes müssen wir unseren Links mit der HTML 5-Klasse einen Click-Event-Handler hinzufügen. Wenn dieser Event-Handler losgeht, müssen wir einige Dinge tun:

Zuerst müssen wir ein neues Audio-Tag erstellen und ihm einige Attribute wie Steuerelemente geben.
Dann müssen wir das Quell-Tag hinzufügen, damit es tatsächlich weiß, was zu spielen ist.
Schließlich müssen wir den HTML-Code im Audio-Bereich durch das neue Audio-Tag ersetzen und false zurückgeben, damit die normale Aktion des Links nicht ausgeführt wird und der Song heruntergeladen wird. So können Sie das alles zusammenstellen:

$(document).ready(function() {
    var audioSection = $('section#audio');
    $('a.html5').click(function() {

        var audio = $('<audio>', {
             controls : 'controls'
        });

        var url = $(this).attr('href');
        $('<source>').attr('src', url).appendTo(audio);
        audioSection.html(audio);
        return false;
    });
});

Da es in diesem Tutorial um Ruby on Rails und nicht um JavaScript geht, werde ich nicht näher darauf eingehen, wie dieser Code funktioniert. Der Code ist jedoch recht einfach, sodass Sie ihn leicht herausfinden können. Eine Sache, die Sie beachten sollten, ist, dass dies nur in Browsern funktioniert, die HTML5 und MP3s als gültige Quellen für Audio-Tags unterstützen. Für die meisten Browser unterstützt die neueste Version diesen HTML 5-Code, ältere Browser unterstützen dies jedoch nicht.

Indexansicht abgeschlossen

Wir haben endlich alle Kernfunktionen für diese Anwendung abgeschlossen. Der Benutzer kann MP3s auf verschiedene Arten hochladen, herunterladen und löschen, einschließlich HTML5-Audio, HTTP-Downloads und Bit Torrent. So sollte die Indexansicht an dieser Stelle aussehen:

<h2>Listen to a MP3 with HTML5 Audio</h2>
<section id="audio"> 
</section>
<h2>Upload a new MP3</h2>
<%= form_tag upload_path, :method => "post", :multipart => true do %>
    <%= file_field_tag "mp3file" %>
    <%= submit_tag "Upload" %>
<% end %>
<h2>Download and Delete Existing MP3's</h2>
<table>
<% @songs.each do |song| %>
    <tr>
        <td><%= song.key %></td>
        <td><%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5" %></td>
        <td><%= link_to "Download", download_url_for(song.key) %></td>
        <td><%= link_to "Torrent", torrent_url_for(song.key) %></td>
        <td><%= link_to "Delete",  "songs/delete/?song=" + song.key, :confirm => 'Are you sure you want to delete ' + song.key + '?' %></td>
    </tr>
<% end %>
</table>

Wenn Sie dies noch nicht getan haben, sollten Sie versuchen, diesen Code auszuführen und selbst auszuprobieren. Sie können dies tun, indem Sie den Befehl ausführen: rails s. Obwohl wir die Kernfunktionalität für diese Anwendung abgeschlossen haben, müssen noch einige Dinge erledigt werden, z. B. das Stylen der Seite. Lassen Sie uns das jetzt machen.

Styling der Anwendung

Das erste, was Sie tun müssen, ist, die Seite in einen Container zu verpacken, damit wir sie zentrieren können. Alles, was wir tun müssen, ist, ein div mit der ID eines Containers um die Yield-Anweisung in der Layout-Datei zu setzen, damit es ungefähr so aussieht:

1	<div id="container">
2	<%= yield %>
3	</div>

Als nächstes werden wir das Styling von Ryan Bates Edelstein nifty_generators verwenden, um unserer Anwendung ein grundlegendes Styling zu geben. Hier ist das CSS, das wir von diesem gem verwenden werden:

#container {
  width: 75%;
  margin: 0 auto;
  background-color: #FFF;
  padding: 20px 40px;
  border: solid 1px black;
  margin-top: 20px;
}
body {
  background-color: #4B7399;
  font-family: Verdana, Helvetica, Arial;
  font-size: 14px;
}
.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}

Jetzt arbeiten wir an der Indexansicht. Als erstes müssen wir die Seite in drei Abschnitte unterteilen. Diese Abschnitte sind eine Kopfzeile, ein Hauptabschnitt und eine Seitenleiste. Fügen wir oben auf der Seite eine einfache Überschrift hinzu:

1	<header>
2	<h1>My First Music Streaming Application</h1>
3	</header>

Als nächstes teilen wir die Seite in einen Hauptbereich und einen Seitenleistenbereich. Unsere Hauptregion besteht aus der Liste der Songs, während die Seitenleiste das HTML5-Audio und das Upload-Formular enthält. So ändern wir den Code:

<div class="clear"></div>
<section id="sidebar">
    <h2>HTML5 Audio</h2>
    <section id="audio">
		No song is currently playing.
    </section>

    <h2>Upload a Song</h2>
    <%= form_tag upload_path, :method => "post", :multipart => true do %>
        <%= file_field_tag "mp3file" %><br />
        <%= submit_tag "Upload" %>
    <% end %>
</section>
<section id="main">
    <h2>Download/Delete Songs</h2>
    <table>
    <% @songs.each do |song| %>
        <tr>
            <td><%= song.key %></td>
            <td><%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5" %></td>
            <td><%= link_to "Download", download_url_for(song.key) %></td>
            <td><%= link_to "Torrent", torrent_url_for(song.key) %></td>
            <td><%= link_to "Delete",  "songs/delete/?song=" + song.key, :confirm => 'Are you sure you want to delete ' + song.key + '?' %></td>
        </tr>
    <% end %>
    </table>
</section>
<div class="clear"></div>

Da wir Floats zum Entwerfen dieser Seite verwenden, müssen wir die Floats vorher und nachher löschen, um sicherzustellen, dass das Layout nicht durcheinander gerät. Fügen wir nun das CSS hinzu, um das Layout dieser Abschnitte anzupassen:

#sidebar {
    width: 30%;
    float: left;
}
#main {
    width: 70%;
    float: left;
}
a, a:visited {
    color: #00f;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
td {
    padding: 5px;
}

Die Seitenleiste macht 30% der Seite aus, und der Hauptbereich macht 70% der Seite aus. Darüber hinaus gibt es CSS, mit dem die Unterstreichung aus den Links entfernt werden kann, sofern die Maus nicht darüber bewegt wird. Außerdem wird den <td>-Tags eine Auffüllung hinzugefügt, damit sie nicht so eng aussieht. Letztendlich ist dies wirklich das einzige CSS, das wir benötigen, um der Seite ein grundlegendes Layout zu geben. Fühlen Sie sich frei, dieser Anwendung so viel Styling hinzuzufügen, wie Sie möchten, denn es gibt sicherlich Möglichkeiten, diese Anwendung schöner aussehen zu lassen.

Abschluss

Hoffentlich haben Sie jetzt ein gutes Verständnis für die Interaktion mit Amazon S3 in Ihrer Ruby on Rails-Anwendung. Mit dem aws-s3 gem ist dies sehr einfach, sodass das Hinzufügen zu einer vorhandenen Anwendung nur sehr wenig Zeit in Anspruch nimmt. Sie können diese Anwendung jederzeit ändern, um festzustellen, ob Sie sie auf irgendeine Weise verbessern können. Denken Sie daran, der Datei application.rb Ihre eigenen Amazon S3-Anmeldeinformationen und die Bucket-Konstante hinzuzufügen, da sonst die Anwendung nicht gestartet wird!

Für diejenigen unter Ihnen, die Ruby on Rails-Experten sind, bin ich sicher, dass Sie einen Weg finden können, diese Anwendung noch weiter zu optimieren. Darüber hinaus wäre es großartig, alle Optimierungen, die Sie im Kommentarbereich vornehmen, mit anderen zu teilen, damit die Leser noch mehr aus diesem Tutorial herausholen können.