[RUBY] Vorgehensweise zum Abspielen von MP3 mit audio_tag in haml

Einführung

Ich wollte eine Site erstellen, die Audio mit haml abspielen kann, konnte aber nur HTML-Artikel finden. Es fiel mir schwer, den Code zu schreiben, um ihn zu implementieren, deshalb schrieb ich ihn als Memorandum.

HTML5 hat ein Tag namens audio_tag zum Abspielen von Audio. Auf diese Weise können Sie einen Player installieren, der Audio mit Erweiterungen wie MP3 und WAV wiedergeben kann.

Diesmal mache ich es mit mp3. Die Rails-Version ist 5.2.3.

Vorbereitung der Schallquelle

Bereiten Sie zunächst die MP3-Tonquelle vor, die Sie abspielen möchten. In meinem Fall war die Tonquelle, die ich verwenden wollte, nicht MP3, daher habe ich die Erweiterung auf dieser Site geändert. https://online-audio-converter.com/ja/

Legen Sie die Tonquelle in das Verzeichnis

Dann erstellen Sie einen Ordner.

app/assets/audios

Legen Sie die MP3-Soundquelle in den Audio-Ordner. Ich habe die Audiodatei im Finder verschoben.

Dieses Mal haben wir MP3 mit dem Namen "sample.mp3" als Sample-Soundquelle vorbereitet.

Player-Installation

Schreiben Sie den Code, um den Playback-Player in haml zu installieren.

.sumple_voice
 = audio_tag('sample.mp3', id: 'sample-audio', controls: "controls")

Dadurch wird ein solcher Player installiert.

Das Vorhandensein von "Steuerelementen:" Steuerelementen "" installiert den Player, und wenn Sie die Wiedergabetaste drücken, wird die angegebene Tonquelle abgespielt. Es gibt kein Problem, auch wenn keine ID vorhanden ist. Sie können sie daher löschen, wenn Sie sie nicht benötigen.

Deaktivieren Sie den Download der Tonquelle

Jetzt kannst du es spielen. Wenn dies jedoch unverändert bleibt, kann die Tonquelle über die Schaltfläche auf der rechten Seite des Players heruntergeladen werden, auf der drei Punkte vertikal ausgerichtet sind.

Wenn dies ein Problem ist, können Sie die Download-Schaltfläche entfernen, indem Sie "Steuerelementliste:" kein Download "" schreiben.

.sumple_voice
 = audio_tag('sample.mp3', id: 'sample-audio', controls: "controls", controlslist: "nodownload")

Jetzt, da der Button weg ist, kann ich ihn nicht mehr herunterladen.

Ergänzung

Ich habe es dieses Mal nicht verwendet, weil es auf eine einfache Audiowiedergabe ausgerichtet war, aber es scheint, dass es mithilfe von audio.js weiter angepasst werden kann. https://qiita.com/whitia/items/3e533c64ce6b6badfb63 Wenn Sie andere Dinge als die einfache Wiedergabe tun möchten, können Sie dies ausprobieren.

Referenz

https://railsdoc.com/page/audio_tag https://qiita.com/NishidaRyu416/items/c244aeeaacab1d9bb0c1