Audio PlaybackRate в мобильных браузерах и поддерживаемый плагин
Я должен играть песню в браузерах, включая Android а также iPhone. Я сделал это с помощью аудиоплеера HTML5. Но скорость воспроизведения не работает в Мобильные браузеры. Есть ли библиотека или плагин для этого? Является веб-аудио API поддерживает эту функцию?
В этом сайт Скорость воспроизведения работает и в мобильных телефонах. Но не можете найти какой метод они следуют?
<!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>
Решение
Сайт, на который вы ссылаетесь, использует Web Audio, но не использует скорость воспроизведения для изменения темпа песни. Вместо этого он планирует каждую ноту отдельно, поэтому, когда вы меняете темп, вы действительно меняете BPM, на который запланированы ноты. Вы можете думать об этом как об изменении этого:
setTimeout(schedule, 1000);
чтобы:
setTimeout(schedule, 500);
когда вы идете от 60 до 120 ударов в минуту.
Тем не менее, Web Audio похожа на то, что вы делаете с аудиоэлементом. AudioBufferSourceNode, который вы используете для воспроизведения предварительно записанного семпла, имеет свойство playRate. Это изменяет скорость звука (но не делает коррекцию высоты тона!). Проверьте это в https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode
Другие решения
Нет никаких внешних плагинов или 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>