jquery - 控制音量并在点击时播放 .mp3 (div)

Question

我不断得到新的想法，因此新的问题和问题，所以我再次寻求帮助!

问题/我想解决的问题:我有 4 个 .mp3 文件，
-我希望能够单击 div/ahref 并启动声音。
-我希望能够一次播放多个文件
- 我喜欢所有声音或每个声音单独的音量 slider

多亏了SO，我已经走了很长一段路，这就是我目前所拥有的:http://eduweb.hhs.nl/~14042568/Help/

$(document).ready(function(){ //ready document, execute function
$(".parent").click(function(){ //add event to class
    var color = $(this).data("color") //add variable get color-data
    $("#home").css("background-color", color); //change property
    var audio = new Audio('./mp3/piano.mp3'); //only plays piano<-- PROBLEM
    audio.play(); //play sound
});
});

紫色(右上)已经在工作，问题是 jQuery 只播放一种声音，正如我所说，这是一个问题。

谢谢 :)

Answer 1

你看过html5的<audio>标签？它做了很多你正在寻找的事情。这是更多信息的链接。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

编辑

这是您需要对 html 音频标签执行的所有操作:

<audio src="directoryToFile/subDir/yourSong.mp3" controls></audio>

属性 controls为您提供播放按钮、音量、静音、时间以及选择要播放歌曲的哪个部分的 slider 。

老实说，并非每个浏览器都会播放 mp3，因此解决此问题的方法是将多个源放入同一首歌曲但格式不同。像这样:

<audio controls>
    <source src="dir/yourSong.mp3" type="audio/mp3">
    <source src="dir/yourSong.ogg" type="audio/ogg">
    <source src="dir/yourSong.3gp" type="audio/3gp">
    <p>Your browser does not support the <code>audio</code> element </p>
</audio>

这允许用户使用哪个浏览器来决定最适合它的浏览器。

有 loop允许歌曲在完成后重复的属性。

然后是 preload=""属性。这用于大文件，您可以将其设置为无、自动或元数据

最后，如果你想让你的网站真的很烦人，你可以给元素 autoplay属性(请不要使用自动播放)。

最好的部分是不需要 JavaScript 或 JQuery。当然，您可以使用带有 JQuery 的 JS 对音频标签做更多花哨的事情，但这不是必需的。