[RAILS] Wie man Stimme oder Musik mit Javascript spielt

Vorwort

Ich bin seit 3 Monaten ein Anfänger, seit ich selbst angefangen habe, Programmieren zu lernen. Die Artikel der Pioniere haben mir geholfen, als ich viele Male gegen die Wand schlug. Ich beschloss, einen Artikel zu veröffentlichen, in der Hoffnung, dass er denjenigen helfen würde, die sich Sorgen machen.

Dieser Artikel basiert auf dem, was ich aus dem Wunsch heraus recherchiert habe, Audio während Javascript-Ereignissen (im Folgenden als JS abgekürzt) abzuspielen, und auf der spezifischen Verarbeitung während des Erstellungsprozesses einer Webanwendung. Ich werde. Ursprünglich verfügt HTML über ein Audioelement, und Sie können Audio abspielen, indem Sie den Speicherort der Datei im src-Attribut des Audioelements angeben. In der Rails-Umgebung funktionierte die Angabe des Dateispeicherorts jedoch nicht. Aufgrund von Stolpern entschied ich mich für ein Juwel namens "audiojs-Rails".

Zweck#

In diesem Artikel werde ich es zum Zweck "Ausblenden des Wiedergabeplayers und Abspielen des Sounds beim Drücken der HTML-Eingabetaste" beschreiben. Wenn Sie es arrangieren, können Sie es nach Abschluss eines bestimmten Vorgangs abspielen.

Nutzungsumgebung

OS:Win10 Rails 5.2.4.4 Ruby 2.6.6 Derzeit in einer lokalen Umgebung entwickelt

Inhaltsverzeichnis#

◆ So installieren und verwenden Sie Gem ◆ So angeordnet, dass es von einem bestimmten Ereignis gespielt werden kann ◆ Verstecken Sie den Playback-Player!

◆ Installieren und Verwenden von Gem

1. 1. Fügen Sie der Gemfile den folgenden Inhalt hinzu und führen Sie die Bundle-Installation durch.

• Wenn der Rails-Server ausgeführt wird, starten Sie ihn neu.

gem 'audiojs-rails'

2. Initialisierung von Audiojs und Installation des Playback-Players

Beschreiben Sie die folgenden Inhalte in der Ansicht, in der Sie die Audiodaten abspielen möchten. Ein Playback-Player wird von audiojs.createAll () erstellt.

• Du brauchst keinen Playback-Player! Selbst wenn dies der Fall ist, wird empfohlen, die folgenden Inhalte in Ansicht zu beschreiben, um zu überprüfen, ob sie abgespielt werden können.
• Bitte ändern Sie sample.mp3 in den Namen der von Ihnen vorbereiteten Soundquellendatei.

<!--Spieler spielen-->
<%= audio_tag 'sample.mp3' %>

<!--Initialisierung von Audiojs-->
<script>
    const audioPlayer = audiojs.createAll();
</script>

3. 3. Fügen Sie den Assets-Pfad # hinzu

"Sample.mp3", das vom oben installierten Playback-Player geladen wird, ist der Name der Audiodatei. Sie können Ihre Lieblingsdatei vorbereiten, achten Sie jedoch auf den Speicherort. Stellen Sie sicher, dass Sie es in App / Assets / Audios / platzieren. (Ich habe es erstellt, weil ich den Audios-Ordner nicht hatte, aber es hat gut funktioniert.)

Es kann jedoch nicht nur durch Speichern verwendet werden. Fügen Sie daher einen Asset-Pfad für die Bereitstellung in die Asset-Pipeline ein. Fügen Sie config / initializers / assets.rb Folgendes hinzu.

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "audios")

4. Überprüfen Sie, ob der Assets-Pfad hinzugefügt wurde.

Starten Sie in der von Ihnen verwendeten Befehlszeile die Rails-Konsole und geben Sie Folgendes ein:

Rails.application.config.assets.paths

Infolgedessen scheint es kein Problem zu geben, wenn der Ordnerpfad mit Audios am Ende gelesen wird.

• Der folgende Ordnerpfad ist ein Beispiel. Er ändert sich je nachdem, wo Sie Ihre Webanwendung speichern.

"C:/Users/sample/ruby/webapp/app/assets/audios"

Nachdem Sie bestätigt haben, dass der Pfad hinzugefügt wurde, prüfen wir, ob er abgespielt werden kann. Wenn Sie es spielen können, können Sie loslegen.

◆ Ordnen Sie es so an, dass es von einem bestimmten Ereignis gespielt werden kann.

1. Fügen Sie der Ansicht ein Eingabe-Tag hinzu, legen Sie die ID fest und lesen Sie sie mit Script.

Dieses Mal weise ich einer Variablen eine ID zu, die als Operation bezeichnet wird.

python

<input type="submit" id="operation">
<script>
    const operation = document.getElementById("operation");
    const audioPlayer = audiojs.createAll();
</script>

2. Wiedergabe Spielt Audio ab, wenn die Player-Informationen der Audiovariablen zugewiesen und auf die Eingabe geklickt wird.

• Stellen Sie sicher, dass Sie eine Variable vorbereiten, die die audioPlayer-Indexnummer [0] enthält. Typ audioPlayer.play (); funktioniert nicht.

python

<input type="submit" id="operation">
<script>
    const operation = document.getElementById("operation");
    const audioPlayer = audiojs.createAll();
#Inhalt von hier hinzugefügt
    const audio = audioPlayer[0];

    operation.addEventListener("click", () => {
        audio.play();
    });
#Bisher
</script>

Ich verstehe nicht wirklich, warum Sie audioPlayer [0] für Audio setzen müssen, Als ich mir den Inhalt von audioPlayer auf Console.log ansah, stellte ich fest, dass dies wie folgt war. Der AudioPlayer enthält die Informationen, als der Playback-Player generiert wurde. Da der Inhalt von Indexnummer 0 Informationen zu Audiodateien und Vorgängen wie Wiedergabe und Stopp enthält, wird spekuliert, dass er möglicherweise nicht funktioniert, wenn er nicht angegeben wird.

◆ Verstecken Sie den Playback-Player!

Alles, was Sie tun müssen, ist, Audio_tag in Div-Tags einzuschließen und CSS Display auf none zu setzen.

<div class="none">
    <%= audio_tag 'decision48.mp3' %>
</div>    

Schließlich

Dieses Mal habe ich versucht, den Inhalt der Manipulation der Informationen verschiedener Artikel auf meine eigene Weise zusammenzufassen. Wenn Sie Fragen haben, lassen Sie es uns bitte wissen. Ich werde auch die Artikel zusammenfassen, auf die ich verwiesen habe. Wenn Sie also interessiert sind, tun Sie dies bitte!

・ [Rails] Verfahren von der Installation von audiojs-Rails bis zur Wiedergabe von Audiodateien ↑ Die Optionen des Wiedergabespielers sind ebenfalls zusammengefasst. Wenn Sie mit dem Wiedergabespieler spielen möchten, kommen Sie bitte.

• Memo von Javascript (audio.js) zum Abspielen von MP3 ↑ Ich mache mit jQuery eine Wiedergabetaste und eine Stopptaste. Wenn Sie es anwenden, können Sie dies möglicherweise auch mit JS alleine tun.