How to Install SSL Certificate on Apache? SSL stands for Secure Sockets Layer, the protocol which provides the encryption. It provides secure, encrypted communications between a website and an internet browser. and are typically installed on pages that require end-users to submit sensitive information over the internet like credit card details or passwords, used to secure our website and web app. 1. Install OpenSSL OpenSSL is a software library to be used in applications that need to secure communication over the internet. To install on Ubuntu/Debian run the following command. sudo apt-get update sudo apt-get install openssl 2. Generate Key and CSR CSR stands for Certificate Signing request, To generate server key and CSR file run the following command, replace example.com to your domain name on which you want to install SSL certificate. openssl genrsa -out example.com.key 2048 openssl req -new -sha256 -key example.com.key -out example.com.csr When you will run the above command it will ask your information like Country: IN State or Province: XYZ City or Locality: XYZ Organization Unit: XYZ Organization: XYZ Common Name: www.example.com Fill out your details and hit enter, In Country provide two digits of your country code(example India: IN, USA: US etc ) Download these two files (example.com.key and example.com.csr) and submit it to the certificate provider, then they will issue the certificate. The certificate should contains two file .crt and .ca-bundle or bundle.crt Put your certificate file, bundle file and key file in the directory /etc/ssl/certs/ SSLCertificateFile — Certificate file SSLCertificateKeyFile — Server key file SSLCertificateChainFile — bundle file 3. Configure Apache Web Server Create the virtual host in apache, edit the file and make the virtual host for your domain and include the domain name, port 443, certificate file path etc. sudo nano /etc/apache2/site-enabled/000-default.conf If you want to redirect all your traffic to https than make sure you are also adding redirect rule. The virtual host may look like. <VirtualHost *:443> ServerAdmin admin@example.com DocumentRoot /var/www/html ServerName example.com ServerAlias www.example.com SSLEngine on SSLCertificateFile /etc/ssl/certs/example.com.crt SSLCertificateKeyFile /etc/ssl/certs/example.com.key SSLCertificateChainFile /etc/ssl/certs/example_bundle.crt <Directory /var/www/html> Options FollowSymLinks AllowOverride All </Directory> </VirtualHost> #Redirect all http traffic to https <VirtualHost *:80> ServerName example.com ServerAlias www.example.com Redirect permanent / https://www.example.com </VirtualHost> 4. Enable SSL Mode and restart apache services sudo a2enmod ssl sudo service apache2 restart Open your website URL in web browser eg. example.com or www.example.com and you will see a green(Secure) lock before the URL.

I can't play sound on click in a drum machine

Kelly

I want to create a simple react drum machine.

I want to render 9 drumpads and play sound on click.

My DrumPad does only render the first key Q and doesn't play a sound.

import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

const DrumPad = () => {
  const pads = [
    {
      key: "Q",
      id: "Heat-1",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
    },
    {
      key: "W",
      id: "Heat-2",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
    },
    {
      key: "E",
      id: "Heat-3",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
    },
    {
      key: "A",
      id: "Heat-4",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
    },
    {
      key: "S",
      id: "Clap",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
    },
    {
      key: "D",
      id: "Open-HH",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
    },
    {
      key: "Z",
      id: "Kick-n-Hat",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
    },
    {
      key: "X",
      id: "Kick",
      url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
    },
    {
      key: "C",
      id: "Closed-HH",
      url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
    }
  ];

  for (var i = 0; i < pads.length; i++) {
    return (
      <div className="drum-pad" id={pads[i].id}>
        {pads[i].key}
        <audio
          id="audio"
          src={pads[i].url}
          onclick={function() {
            const sound = document.getElementById("audio");
            sound.play();
          }}
        />
      </div>
    );
  }
  
};

const App = () => {
  return (
    <div>
      <div id="drum-machine">
        <DrumPad />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));