Trying to add a mp3 sound to a pressed button Trying to add a mp3 sound to a pressed button

I am as green as with Javascript but I am just wanting the page below to change the photo (which it does) update the text (which it does) and play the song of the bird once the bird name is pressed. I have it playing one song with the use of the "Play" button, then I tried to move parts of that in to each function, no joy. I have tried to an another getelementbyid (audio) but that didn't work, I am stuck when trying to have it run from within each function.

I hope that is kind of clear and thanks for any help in advance.

<html>
<head>
</head>
<body>
    <p>
        <h2>Click the button to change the bird image.</h2>
    </p>
    <img id="myImg" src="http://www.outgrabe.net/bird04.jpg" width="207" height="198">
    <p id="p1">Rose Robin by JJ Harrison (CC-by-SA)</p>
    <BR></BR>
    <button onclick="myFunction_1()">Pardalote</button>
    <button onclick="myFunction_2()">Purple Swamp Hen</button>
    <button onclick="myFunction_3()">White-headed Stilt</button>
    <button onclick="myFunction_4()">Inland Thornbill</button>
    <button onclick="myFunction_5()">Rose Robin</button>
    <input type="button" value="PLAY" onclick="play()">
    <audio id="audio" src="https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Pardalote.mp3"></audio>
    <script>
        function myFunction_1() {
            document.getElementById("myImg").src = "http://www.outgrabe.net/bird00.jpg";
            document.getElementById("p1").innerHTML = "Pardalote by fir0002 (CC-by-NC)";
        }
        function play() {
            var audio = document.getElementById("audio");
            audio.play();
        }
        function myFunction_2() {
            document.getElementById("myImg").src = "http://www.outgrabe.net/bird01.jpg";
            document.getElementById("p1").innerHTML = "Purple swamp hen by Toby Hudson (CC-by-SA)";
        }
        function myFunction_3() {
            document.getElementById("myImg").src = "http://www.outgrabe.net/bird02.jpg";
            document.getElementById("p1").innerHTML = "White-headed Stilt by JJ Harrison (CC-by-SA)";
        }
        function myFunction_4() {
            document.getElementById("myImg").src = "http://www.outgrabe.net/bird03.jpg";
            document.getElementById("p1").innerHTML = "Inland Thornbill by Peter Jacobs (CC-by-SA)";
        }
        function myFunction_5() {
            document.getElementById("myImg").src = "http://www.outgrabe.net/bird04.jpg"
            document.getElementById("p1").innerHTML = "Rose Robin by JJ Harrison (CC-by-SA)";;
        }
        /* The links to the MP3 flies 
        Pardalote
        https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Pardalote.mp3   
        Purple Swamp Hen
        https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Purple-Swamphen.mp3
        White-headed Stilt
        https://amitylabradoodles.com.au/wp-content/uploads/2021/07/White-backed-Stilt-bird-sounds.mp3
        Inland Thornbill
        https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Inland-Thornbill.mp3
        Rose Robin
        https://amitylabradoodles.com.au/wp-content/uploads/2021/07/Rose-Robin.mp3 */
   }
    </script>
</body>
</html>


from Stackoverflow

Comments

Post a Comment

Popular posts from this blog

With jQuery, how to automatically select the value of an input text that has been modified with the arrows? With jQuery, how to automatically select the value of an input text that has been modified with the arrows?

I want to be able to increase/decrease the value of an input text with the keyboard arrows and have it automatically selected (with jQuery). I succeed the increase/decrease part but I fail on the selection part. I tried $input.select(); with no success. What am I doing wrong? $(".textInput").keydown(function(event) { var $input = $(this); if (event.which === 38) { $input.val((parseInt($input.val()) + 1)); } else if (event.which === 40) { $input.val((parseInt($input.val()) - 1)); } $input.select(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="text" value="300" class="textInput"> https://jsfiddle.net/timmyyy/1L94j2ye/2/ from Stackoverflow
Read more

Cannot create an instance of a defined class in Javascript Cannot create an instance of a defined class in Javascript

I have defined a class which represent a Pokemon: class Pokemon { constructor(id,nick,level,a1,a2,a3,a4) { this.id=id; this.name=setPokemonById(id); this.nick=nick; this.typeId=setTypeById(id); this.type=setElementById(this.typeId); this.level=level; this.attack1=a1; this.attack2=a2; this.attack3=a3; this.attack4=a4; this.attack1CurrPP=this.attack1.getPP(); this.attack2CurrPP=this.attack2.getPP(); this.attack3CurrPP=this.attack3.getPP(); this.attack4CurrPP=this.attack4.getPP(); this.hp=generateHP(id,level); this.currHP=this.hp; } getId() {return this.id;}; getName() {return this.n
Read more

Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error Using Ts-Standard linting, JSDoc comment at beginning of file triggers "This rule requires the `strictNullChecks` compiler option" error

I'm using Typescript and the TS-standard version of StandardJS's ESlint plugin and extension for VSCode. I have been using JSDoc-style comment blocks ( /** Some text */ ) at the beginning of javascript and now typescript files to indicate things like author and give a general overview of the contents of the file. I was using the standardJS eslint plugin already, but it generally didn't work properly on my code library, never figured out why. Recently I started upgrading my codebase to Typescript, and now I'm getting this error on all of these comment blocks: This rule requires the `strictNullChecks` compiler option to be turned on to function correctly. (@typescript-eslint/strict-boolean-expressions)ts-standard(@typescript-eslint/strict-boolean-expressions) I tried turning on the strictNullChecks option, and it did indeed clear that error, but is also a nightmare for certain places where I know values aren't going to be null if the object exists at all (and using
Read more