I am a beginner for 3 months since I started learning programming by myself. As I continued to study while hitting the wall many times, I was helped by the articles of the pioneers. I decided to post an article in the hope that it would help those who are worried.
This article is based on the content that I investigated from the desire to play audio at the time of Javascript (hereinafter abbreviated as JS) event or when performing specific processing in the process of creating a web application. I will. Originally, HTML has an audio element, and you can play audio by specifying the location of the file in the src attribute of the audio element. However, under Rails environment, specifying the file location did not work, and as a result of stumbling, I decided to use a gem called "audiojs-rails".
In this article, I will describe it for the purpose of "Hiding the playback player and playing the sound when the HTML Input button is pressed". If you arrange it, it will be possible to play it after a specific process is completed.
OS:Win10 Rails 5.2.4.4 Ruby 2.6.6 Currently under development in a local environment
◆ How to install and use Gem ◆ Arranged so that it can be played by a specific event ◆ Hide the playback player!
gem 'audiojs-rails'
Describe the following contents in the View where you want to play the audio data. A playback player is created by audiojs.createAll ().
<!--Play player-->
<%= audio_tag 'sample.mp3' %>
<!--initialization of audiojs-->
<script>
const audioPlayer = audiojs.createAll();
</script>
"Sample.mp3" loaded by the playback player installed above is the name of the audio file. You can prepare your favorite file, but be careful about the storage location. Be sure to place it in app / assets / audios /. (I created it because I didn't have the audios folder, but it worked fine.)
However, it cannot be used just by saving it, so add an assets path for delivery in the asset pipeline. Add the following to config / initializers / assets.rb.
config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "audios")
At the command line you are using, launch the Rails console and type in the following:
Rails.application.config.assets.paths
As a result, if the folder path with audios at the end is read, there seems to be no problem.
"C:/Users/sample/ruby/webapp/app/assets/audios"
After confirming that the path has been added, let's see if it can be played. If you can play it, you are ready to go.
This time, I assign an ID called operation to a variable.
python
<input type="submit" id="operation">
<script>
const operation = document.getElementById("operation");
const audioPlayer = audiojs.createAll();
</script>
python
<input type="submit" id="operation">
<script>
const operation = document.getElementById("operation");
const audioPlayer = audiojs.createAll();
#Contents added from here
const audio = audioPlayer[0];
operation.addEventListener("click", () => {
audio.play();
});
#So far
</script>
I don't understand exactly why you have to put audioPlayer [0] for audio, When I looked into the contents of audioPlayer on Console.log, I found that it was as follows. The information when the playback player was generated is stored in audioPlayer. Therefore, since the content of index number 0 contains audio file information and information related to operations such as play and stop, it is speculated that it may not work unless it is specified.
All you have to do is enclose the Audio_tag in a Div tag and set the CSS Display to none.
<div class="none">
<%= audio_tag 'decision48.mp3' %>
</div>
This time I tried to summarize the contents of manipulating the information of various articles in my own way. If you have any questions, please let us know. I will also summarize the articles that I referred to, so if you are interested, please do!
・ [Rails] Procedure from installation of audiojs-rails to playback of audio files ↑ Playback player options are also summarized. If you want to play with the playback player, please come. ・ Note of javascript (audio.js) to play MP3 ↑ I am making a play button and a stop button using jQuery. If you apply it, you may be able to do the same with JS alone.
Recommended Posts