Question

我正在制作在线学习课程，并且需要此按钮：

https://lwfiles.mycourse.app/diqual-training-public/4bed6d14166fb6c6ae774de7077539ab.png?client_id=5eaee65ac7f0fc16f233921d&amp

能够被单击，然后播放音频文件，然后当您单击按钮时，它将再次暂停。

我想使用html5来完成所有操作，但是我只能在单击它时才能播放它。

有人可以帮我吗？

Answer 1

短答案：

您可能无法使用JS，或者通过freecodecamp.org学习JS（如果您已经学习过HTML和CSS）

这是一个课程网站，可能需要一些JS和PHP等

使用HTML5音频标签：

 <audio controls>
  <source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

工作： https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_audio

您需要文件才能播放。

我还找到了一种简单的方法：

<audio src="demo.mp3" controls></audio> 
<!-- Seems to not work... use the other one found in the repl below -->

您需要<!DOCTYPE html>

这是我能得到的最接近的，您需要使用JS ...

https://repl.it/@DarmiyaevDev/Audio#index.html

这都是纯HTML5

抱歉，我认为您需要JS才能使用图片onclick音频。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="script.js"></script>
    <image src="audio.png" width="50vh" height="50vh"></image>
     <audio controls>
  <source src="8 Bit FX.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
  </body>
</html>

实施在线学习课程的音频按钮

1 个答案: