Question

我必须在浏览中播放一首歌曲，包括 Android 和 iPhone 。我是用html5音频播放器做的。但播放功能无法在移动浏览器中使用。有没有可用的库或插件？ 网络音频 API是否支持此功能？

此site播放率也适用于手机。但无法找到他们遵循的方法？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/jquery.js"></script>
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <audio src="./audio/Kalimba.mp3" id="audio1"  controls>Canvas not supported</audio>
        <button id="playbutton" >Play</button>
    </body>
    <script type="text/javascript" >
        $(document).ready(function (e) {
            $('#playbutton').click(function () {
                var audioElm = document.getElementById("audio1");
                var playBackSpeed = 0.5;
                audioElm = document.getElementById("audio1");
                audioElm.playbackRate = playBackSpeed; // default speed 1
                audioElm.play();
            });
        });
    </script>
</html>

Answer 1

您要链接的网站使用网络音频，但它不使用回放来更改歌曲的速度。相反，它会分别安排每个音符，因此当您改变速度时，您真正要做的就是更改安排音符的BPM。您可以将其视为改变这一点：

setTimeout(schedule, 1000);

为：

setTimeout(schedule, 500);

从60 BPM到120 BPM。

然而，与音频元素一样，Web Audio也有类似的东西。用于播放预先录制的样本的AudioBufferSourceNode具有名为playbackRate的属性。这会改变音频的速率（但不会进行音高校正！）。请查看https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode

Answer 2

在浏览器中播放音频不需要任何外部插件或API，这是使用HTML5的优势之一。下面我提到了相同的简单语法和属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    </head>
   <body>
 <audio  controls>
<source src="Kalimba.mp3" type="audio/mp3" />
  Audio not supported.
 </audio>

移动浏览器和支持的插件中的音频PlaybackRate

2 个答案: