[RUBY] Procédure de lecture de mp3 en utilisant audio_tag dans haml

introduction

Je voulais créer un site capable de lire de l'audio en utilisant haml, mais je ne pouvais trouver que des articles HTML. J'ai eu du mal à écrire le code pour l'implémenter, alors je l'ai écrit sous forme de mémorandum.

HTML5 a une balise appelée audio_tag pour la lecture audio. En utilisant cela, vous pouvez installer un lecteur capable de lire de l'audio avec des extensions telles que mp3 et wav.

Cette fois, je vais le faire avec mp3. La version Rails est la 5.2.3.

Préparation de la source sonore

Tout d'abord, préparez la source sonore MP3 que vous souhaitez lire. Dans mon cas, la source sonore que je voulais utiliser n'était pas le mp3, j'ai donc changé l'extension sur ce site. https://online-audio-converter.com/ja/

Mettez la source sonore dans le répertoire

Créez ensuite un dossier.

app/assets/audios

Placez la source sonore mp3 dans le dossier audios. J'ai déplacé le fichier audio dans le Finder.

Cette fois, nous avons préparé un mp3 appelé "sample.mp3" comme source sonore d'échantillon.

Installation du lecteur

Écrivez le code pour installer le lecteur de lecture dans haml.

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

Cela installera un tel lecteur.

La présence de "contrôles:" contrôles "" installe le lecteur, et lorsque vous appuyez sur le bouton de lecture, la source sonore spécifiée commence à jouer. Il n'y a aucun problème même s'il n'y a pas d'identifiant, vous pouvez donc le supprimer si vous n'en avez pas besoin.

Désactiver le téléchargement de la source sonore

Vous pouvez maintenant y jouer. Cependant, si cela reste tel quel, la source sonore peut être téléchargée à partir du bouton sur le côté droit du lecteur où trois points sont alignés verticalement.

Si cela pose un problème, vous pouvez supprimer le bouton de téléchargement en écrivant "liste des contrôles:" pas de téléchargement "".

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

Maintenant que le bouton est parti, je ne peux pas le télécharger.

Supplément

Je ne l'ai pas utilisé cette fois car il était destiné à une lecture audio simple, mais il semble qu'il puisse être personnalisé en utilisant audio.js. https://qiita.com/whitia/items/3e533c64ce6b6badfb63 Si vous souhaitez faire différentes choses autres que la simple lecture, vous pouvez le vérifier.

référence

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