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

Question

所以我想使用這個非常酷的按鈕：

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

我遇到的兩個問題是我無法播放聲音。 我已將 mp3 文件放在根目錄中，所以我假設我需要放置類似

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

當我使用標准音頻控制時，它工作得很好，但我真的很想使用這個很酷的 bean 按鈕。 另外，如果我想將文本放在按鈕的右側，我該怎么辦？

另外，如果我想要一個音頻文件列表，那將如何實現？

謝謝你的幫助

Answer 1

您可以像這樣使用 html

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

和 javascript 這樣

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

要將文本放在按鈕的右側，您可以將所有內容放在另一個帶有顯示的地方： flex; 屬性和彈性方向：行；

對於音頻，我在 javascript 中創建了一個新的音頻 object。 然后我可以輕松地從代碼中啟動和停止它。

要使用多種聲音，我們編輯 toggleSound() function 以使用字符串作為歌曲名稱。 然后我們遍歷字符串以檢查是否有與之關聯的聲音。 這是無限擴展的。 只需在 switch 語句和按鈕中添加更多音頻對象和新案例來控制它們。

您可以看到，在每個按鈕中，我們必須提供音頻名稱，因此每個聲音可以有多個按鈕。

 // 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>