MP3 文件不在自定义控件中播放

Question

So there's this really cool button I want to use:

https://css-tricks.com/making-pure-css-playpause-button/

The 2 problems I'm having is I can't play the sound. I've put the mp3 file in the root directory so I'm assuming I need to put something like

<button class='button'>
  <sound src="play.mp3" type="audio/mpeg">
</button>

When I use the standard audio control it works fine but I really want to use this cool beans button. Also if I want to put text to the right of the button how would I do?

Also if I want to have a list of audio files how would that be achieved?

Thanks for your help

Answer 1

You can use html like this

<button onclick="play_pause()">play/pause</button>
<audio src="music.mp3" id="music"></audio>

And javascript like this

function play_pause(){

            if(document.getElementById("music").paused){ //check whether music is paused
            document.getElementById("music").play();     //if paused then play it
            }

            else{document.getElementById("music").pause();} //else pause it
        }

Answer 2

To put text to the right of the button you would put everything in another with a display: flex; attribute and flex-direction: row;

For the audio, I create a new audio object in javascript. Then I can easily start and stop it from the code.

To use multiple sounds, we edit the toggleSound() function to use a string for the song name. Then we loop over the string to check if we have a sound associated with it. This is infinitely expandable. Just add more audio objects, and new cases in the switch statement and buttons to control them.

You can see that in each button we have to provide the audio name, so you can have multiple buttons per sound.

 // some example audio const song1 = new Audio( "https://ia800905.us.archive.org/19/items/FREE_background_music_dhalius/backsound.mp3" ); // some other audio const song2 = new Audio( "https://ia800905.us.archive.org/19/items/FREE_background_music_dhalius/FormulaFantasy.mp3" ); function toggleSound(audioName) { // switch for every case of the song name. switch(audioName.toString()) { case "song1": var x = song1; break; case "song2": var x = song2; break; default: // set default song var x = song1; } if (x.paused) { x.play(); } else { x.pause(); } }

 .button { margin: 0 10px 10px 0; background: lightgray; }.button:hover { cursor: pointer; }.parent { display: flex; flex-direction: column; }

 <div class="parent"> <div style="display: flex; flex-direction: row;"> <;-- your cool button div --> <div onclick="toggleSound('song1')." class="button"> Song 1 </div> Neat button for the first song: </div> <div style="display; flex: flex-direction; row;"> <.-- your cool button div --> <div onclick="toggleSound('song2');" class="button"> Song 2 </div> Button for the second song. </div> </div>