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

Question

所以我想使用这个非常酷的按钮：

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

我遇到的两个问题是无法播放声音。我已经将 mp3 文件放在根目录中，所以我假设我需要放置类似

的内容

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

当我使用标准音频控件时，它工作正常，但我真的想使用这个很酷的 beans 按钮。另外如果我想把文字放在按钮的右边我该怎么做？

此外，如果我想要一个音频文件列表，那将如何实现？

感谢您的帮助

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 中创建了一个新的音频对象。然后我可以很容易地从代码中启动和停止它。

要使用多种声音，我们编辑 toggleSound() 函数以使用字符串作为歌曲名称。然后我们遍历字符串以检查我们是否有与之关联的声音。这是可以无限扩展的。只需添加更多音频对象，并在 switch 语句和按钮中添加新的 case 来控制它们。

您可以看到，我们必须在每个按钮中提供音频名称，因此每个声音可以有多个按钮。

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

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

MP3 file not playing within a custom control

html

javascript

css

mp3