How to play audio and music using javascript

Preface

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".

Purpose#

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.

usage environment#

OS:Win10 Rails 5.2.4.4 Ruby 2.6.6 Currently under development in a local environment

table of contents#

◆ How to install and use Gem ◆ Arranged so that it can be played by a specific event ◆ Hide the playback player!

◆ How to install and use Gem to use

1. 1. Add the following contents to the Gemfile and perform bundle install.

• If you have started rails server, please restart it.

gem 'audiojs-rails'

2. Initialization of audiojs and installation of playback player

Describe the following contents in the View where you want to play the audio data. A playback player is created by audiojs.createAll ().

• You don't need a playback player! Even if you are, it is recommended to describe the following contents in View to check if it can be played.
• Please change sample.mp3 to the name of the sound source file you prepared.

<!--Play player-->
<%= audio_tag 'sample.mp3' %>

<!--initialization of audiojs-->
<script>
    const audioPlayer = audiojs.createAll();
</script>

3. 3. Add assets path

"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")

4. Check if the assets path has been added.

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.

• The following folder path is an example, so it will change depending on where you save the web application.

"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.

◆ Arrange so that it can be played by a specific event.

1. Add Input tag to View, set ID, and read it with Script.

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>

2. Playback Plays audio when the player information is assigned to the audio variable and input is clicked.

• Be sure to prepare a variable that contains the audioPlayer index number [0]. Type audioPlayer.play (); does not work.

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.

◆ Hide the playback player!

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>    

Finally

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.