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

How to extract items from a subarray and push them to the main array

I'm doing a type speed test and, for this, I'll need to get a random item from an array, split every letter, push it to a new one and re-do this several times. But, every time I split the string from the first array, returns to my new array a subarray, instead of just letters. How can I extract everything from the subarrays and put into my main array? var Pokemon = ["Bulbasaur","Ivysaur","Venusaur","Charmander","Charmeleon","Charizard","Squirtle","Wartortle","Blastoise","Caterpie","Metapod","Butterfree","Weedle","Kakuna","Beedrill","Pidgey","Pidgeotto","Pidgeot","Rattata","Raticate","Spearow","Fearow","Ekans","Arbok","Pikachu","Raichu","Sandshrew","Sandslash","Nidoran","Nidorina",...
Read more

Detox gets stuck on JS Timer/Main Run Loop when registering a lot of screens with React Native Navigation Detox gets stuck on JS Timer/Main Run Loop when registering a lot of screens with React Native Navigation

I have a React Native app that is using React Native Navigation, and this app registers a lot of screens with RNN at bootup (83 screens, to be precise). When I try to run a Detox E2E test against the app, Detox reports that the system is busy: detox[1831] INFO: [APP_STATUS] The system is busy with the following tasks: Dispatch Queue ⏱ Queue: “Main Queue (<OS_dispatch_queue_main: com.apple.main-thread>)” with 1 work item JS Timer ⏱ 3536 Run Loop ⏱ “Main Run Loop” One thing I've found that prevents this is when I comment out most of the RNN screen registration calls, leaving only the essential screens to run the tests. When I do that, the Detox tests run just fine. What also helped was to switch all of the import calls for the RNN screens being registered to inline require s. But this loses us our type checking for all of those screen components. I have tried using Navigation.setLazyComponentRegistrator() and I still get the Detox timeouts. I've been all over the a...
Read more

\\u0000 cannot be converted to text error \\u0000 cannot be converted to text error

I am using NextJS and supabase to insert some data into PostgreSQL database. Data is array of objects. The error is like this \\u0000 cannot be converted to text. unsupported Unicode escape sequence . There is no unicode character like \\u0000 in my data. There is a error response but I cant see which keys value is causing the error. Is there any way to resolve this issue? const Data = async (req, res) => { try { const { data, error } = await supabase.from('db').insert([]) return res.status(200).json({ data: data, error: error, }); } catch (error) { console.log(error); } } from Stackoverflow
Read more