How do I put various buttons with different sounds on my website?-CodePudding

I want to make a website with several different buttons where each one plays a different sound. Can someone help me? I tried to make this code below, but the other part doesn't work :/ Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BUTTONS AND SOUNDS</title>
</head>
<body>
    <h1>Sound Effects</h1>
        <div class="phrase1">
            <audio id='phrase1'>
                <source src="sound1.wav">
            </audio>
            <button>Play 1!</button>
            <script>
                const button = document.querySelector('button')
                button.addEventListener('click', function(){
                    const audio= document.querySelector('#phrase1')
                    audio.currentTime = 0
                    audio.play()
                })
            </script>
        </div>
        <div class="phrase2">
        <audio id='phrase2'> 
            <source src="sound2.wav">
        
            </audio>
            <button>Play 2!</button>
            <script>
                const button = document.querySelector('button')
                button.addEventListener('click', function(){
                    const audio= document.querySelector('#phrase2')
                    audio.currentTime = 0
                    audio.play()
                })
            </script>
        </div>
</html>

CodePudding user response：

Your query selector always only finds the first button. Try to give your buttons a different id to distinct them and use that in your querySelector()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BUTTONS AND SOUNDS</title>
</head>
<body>
    <h1>Sound Effects</h1>
        <div class="phrase1">
            <audio id='phrase1'>
                <source src="sound1.wav">
            </audio>
            <button id="button1">Play 1!</button>
            <script>
                const button1 = document.querySelector('#button1')
                button1.addEventListener('click', function(){
                    const audio= document.querySelector('#phrase1')
                    audio.currentTime = 0
                    audio.play()
                })
            </script>
        </div>
        <div class="phrase2">
        <audio id='phrase2'> 
            <source src="sound2.wav">
        
            </audio>
            <button id="button2">Play 2!</button>
            <script>
                const button2 = document.querySelector('#button2')
                button2.addEventListener('click', function(){
                    const audio= document.querySelector('#phrase2')
                    audio.currentTime = 0
                    audio.play()
                })
            </script>
        </div>
</html>

Should do it.

CodePudding user response：

Part of your problem is here:

            const button = document.querySelector('button')

You should be using an ID-based CSS selector, rather than just the name of an HTML element, to find the button you want. Something like this would be better:

        <button id="playone">Play 1!</button>
        ...
            const button = document.querySelector('#playone')

CodePudding user response：

Opa, tá aqui o código:

<!DOCTYPE html>
<html>
<head>

    <title>Player com botões</title>
    <meta charset="utf-8">

</head>
<body>

    <div id="app">
        <div id="buttons"></div>
        <audio id="audio"></audio>
    </div>

    <script type="text/javascript">

        const buttons = document.querySelector('#buttons');
        const audio = document.querySelector('#audio');

        const player = {
            format: 'mp3',
            buttons: [
                {
                    name: 'Botão do som 1',
                    url: 'audio1.mp3'
                },
                {
                    name: 'Botão do som 2',
                    url: 'audio2.mp3'
                }
            ],

            render() {
                this.buttons.map((button, b) => {
                    buttons.innerHTML  = `
                        <button onclick="player.play(${b});">${button.name}</button>
                    `;
                });
            },

            play(button_id) {
                audio.pause();
                audio.innerHTML = `
                    <source src="${this.buttons[button_id].url}" type="audio/${this.format}">
                `;
                audio.load();
                audio.play();
            }
        };

        player.render();

    </script>

</body>
</html>