[RAILS] Comment jouer de la voix ou de la musique en utilisant javascript

Préface

Je suis débutant depuis 3 mois depuis que j'ai commencé à apprendre la programmation par moi-même. J'ai été aidé par les articles des pionniers alors que je continuais à étudier tout en frappant le mur plusieurs fois. J'ai décidé de publier un article dans l'espoir qu'il aiderait ceux qui sont inquiets.

Cet article est basé sur ce que j'ai recherché à partir du désir de lire de l'audio lors d'événements Javascript (ci-après abrégé en JS) et d'un traitement spécifique lors du processus de création d'une application Web. Je vais. À l'origine, HTML a un élément audio et vous pouvez lire de l'audio en spécifiant l'emplacement du fichier dans l'attribut src de l'élément audio. Cependant, dans l'environnement Rails, la spécification de l'emplacement du fichier ne fonctionnait pas, et à la suite d'un trébuchement, j'ai décidé d'utiliser une gemme appelée "audiojs-rails".

Objectif#

Dans cet article, je vais le décrire dans le but de "Masquer le lecteur de lecture et jouer le son lorsque le bouton Entrée HTML est enfoncé". Si vous l'organisez, il sera possible de le lire après qu'un processus spécifique soit terminé.

environnement d'utilisation

OS:Win10 Rails 5.2.4.4 Ruby 2.6.6 Actuellement en développement dans un environnement local

table des matières#

◆ Comment installer et utiliser Gem ◆ Arrangé pour qu'il puisse être joué par un événement spécifique ◆ Cachez le lecteur de lecture!

◆ Comment installer et utiliser Gem pour utiliser

1. 1. Ajoutez le contenu suivant au Gemfile et effectuez l'installation du bundle.

• Si le serveur de rails est en cours d'exécution, redémarrez-le.

gem 'audiojs-rails'

2. Initialisation de audiojs et installation du lecteur de lecture

Décrivez le contenu suivant dans la vue dans laquelle vous souhaitez lire les données audio. Un lecteur de lecture est créé par audiojs.createAll ().

• Vous n'avez pas besoin d'un lecteur de lecture! Même si c'est le cas, il est recommandé de décrire le contenu suivant dans View pour vérifier s'il peut être lu.
• Veuillez remplacer sample.mp3 par le nom du fichier source sonore que vous avez préparé.

<!--Jouez au joueur-->
<%= audio_tag 'sample.mp3' %>

<!--initialisation de audiojs-->
<script>
    const audioPlayer = audiojs.createAll();
</script>

3. 3. Ajouter le chemin d'accès aux éléments

"Sample.mp3" chargé par le lecteur de lecture installé ci-dessus est le nom du fichier audio. Vous pouvez préparer votre fichier préféré, mais faites attention à l'emplacement de stockage. Assurez-vous de le placer dans app / assets / audios /. (Je l'ai créé parce que je n'avais pas le dossier audios, mais cela a bien fonctionné.)

Cependant, il ne peut pas être utilisé simplement en l'enregistrant, alors ajoutez un chemin d'actifs pour la livraison dans le pipeline d'actifs. Ajoutez ce qui suit à config / initializers / assets.rb.

config/initializers/assets.rb

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

4. Vérifiez si le chemin des ressources a été ajouté.

Sur la ligne de commande que vous utilisez, lancez la console Rails et saisissez ce qui suit:

Rails.application.config.assets.paths

En conséquence, il semble qu'il n'y ait aucun problème si le chemin du dossier avec des audios à la fin est lu.

• Le chemin du dossier ci-dessous est un exemple, il changera donc en fonction de l'endroit où vous enregistrez votre application Web.

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

Après avoir confirmé que le chemin a été ajouté, voyons s'il peut être lu. Si vous pouvez y jouer, vous êtes prêt à partir.

◆ Arrangez-vous pour qu'il puisse être joué par un événement spécifique.

1. Ajoutez une balise d'entrée à View, définissez l'ID et lisez-la avec Script.

Cette fois, j'attribue un ID appelé opération à une variable.

python

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

2. Lecture Lit l'audio lorsque les informations du lecteur sont affectées à la variable audio et que l'entrée est cliquée.

• Assurez-vous de préparer une variable contenant le numéro d'index audioPlayer [0]. Tapez audioPlayer.play (); ne fonctionne pas.

python

<input type="submit" id="operation">
<script>
    const operation = document.getElementById("operation");
    const audioPlayer = audiojs.createAll();
#Contenu ajouté à partir d'ici
    const audio = audioPlayer[0];

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

Je ne comprends pas exactement pourquoi vous devez mettre audioPlayer [0] pour l'audio, Lorsque j'ai examiné le contenu de audioPlayer sur Console.log, j'ai trouvé que c'était comme suit. L'audioPlayer contient les informations relatives à la génération du lecteur de lecture. Par conséquent, étant donné que le contenu du numéro d'index 0 contient des informations sur les fichiers audio et des informations liées à des opérations telles que la lecture et l'arrêt, il est supposé que cela peut ne pas fonctionner à moins que cela ne soit spécifié.

◆ Cachez le lecteur de lecture!

Tout ce que vous avez à faire est de placer Audio_tag dans les balises Div et de définir l'affichage CSS sur aucun.

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

finalement

Cette fois, j'ai essayé de résumer le contenu de la manipulation des informations de divers articles à ma manière. Si vous avez des questions, veuillez nous en informer. Je vais également résumer les articles auxquels j'ai fait référence, donc si vous êtes intéressé, faites-le!

・ [Rails] Procédure depuis l'installation des audiojs-rails jusqu'à la lecture des fichiers audio ↑ Les options du lecteur de lecture sont également résumées. Si vous voulez jouer avec le lecteur de lecture, venez.

• Mémo de javascript (audio.js) pour lire MP3 ↑ Je crée un bouton de lecture et un bouton d'arrêt en utilisant jQuery. Si vous l'appliquez, vous pourrez peut-être faire de même avec JS seul.