我正在尝试完成一个简单的类似涂鸦的行为,使用html标签点击mp3/ogg声音.它应该可以在Firefox,Safari和Safari iPad下工作.
我已经尝试了很多方法,并且已经归结为:
HTML
<span id="play-blue-note" class="play blue" ></span>
<span id="play-green-note" class="play green" ></span>
<audio id="blue-note" style="display:none" controls preload="auto" autobuffer>
<source src="blue.mp3" />
<source src="blue.ogg" />
<!-- now include flash fall back -->
</audio>
<audio id="green-note" style="display:none" controls preload="auto" autobuffer>
<source src="green.mp3" />
<source src="green.ogg" />
</audio>
JS
function addSource(elem, path) {
$('<source>').attr('src', path).appendTo(elem);
}
$(document).ready(function() {
$('body').delegate('.play', 'click touchstart', function() {
var clicked = $(this).attr('id').split('-')[1];
$('#' + clicked + '-note').get(0).play();
});
});
你可以在ign.com.uy/loog/看到整个演示
这似乎在Firefox下运行得很好,但是每当你点击时Safari似乎都有延迟,即使你多次点击并且音频文件已加载.在iPad上的Safari上,它几乎无法预测.
此外,当我在本地测试时,Safari的性能似乎有所改善,我猜测Safari每次都在下载文件.这可能吗？我怎么能避免这个？谢谢!
我无法在任何地方找到这个问题的明确答案.我正在寻找最简单的方法来自动循环.wav文件自动在chrome中的文档加载.似乎webaudio api是最好的做法,但我找不到简单的文档.对safari和其他人的支持也会很棒但不那么重要.
我查看了w3.org示例,但没有帮助
我认为除了按钮的on.click之外,这是我最想要的:https://forestmist.org/blog/web-audio-api-loops/
在这里我为我自己的音频实现了forestmist,它在safari中完美运行但在chrome中停止:http://infinitelimitations.us/mess-motion/web-audio-api-loops-demo/index.html
这是该页面的源代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Audio API Loops Demo</title>
</head>
<body>
<form>
<button id="button-loop-1" type="button" value="1">Loop 1</button>
</form>
<script>
//--------------
// Audio Object
//--------------
var audio = {
buffer: {},
compatibility: {},
files: [
'hoodie_robot_clipped.wav',
'beat.wav'
],
proceed: true,
source_loop: {},
};
//-----------------
// Audio Functions
//-----------------
audio.findSync = function(n) {
var first = 0,
current = 0,
offset = 0;
// Find the audio source …