预加载音频并在播放期间应用 css
Posted
技术标签:
【中文标题】预加载音频并在播放期间应用 css【英文标题】：Preload audio and apply css during playback 【发布时间】：2016-08-31 02:05:45 【问题描述】：我正在寻找声音按钮。
在这里使用了答案： Buttons click Sounds
并实现它，以便按钮是 div 并从 mysql 数据库动态创建。
有谁知道如何在页面加载时预加载声音列表？
另外，我想在单击时将 CSS 类应用于 div，然后在音频结束时，希望它切换回原始 CSS 类。
这是我尝试过的。声音播放正确，但未触发 onended 功能。
<script type='text/javascript'>
$(window).load(function()
var baseUrl = "http://[URL HERE]";
var audio = [<?php echo $audiostring; ?>];
$('div.ci').click(function()
var i = $(this).attr('id').substring(1);
mySound = new Audio(baseUrl + audio[i-1]).play();
mySound.onended = function()
alert("The audio has ended");;
);
);
</script>
【问题讨论】：
【参考方案1】：如果您使用的是 html5 音频，您可以执行以下操作：
mySound.addEventListener("ended", function()
alert("The audio has ended");
);
编辑：
尝试更改创建音频标签的方式，参考here。
$('div.ci').click(function()
var i = $(this).attr('id').substring(1);
mySound = $(document.createElement('audio'));
mySound.src = baseUrl + audio[i-1];
mySound.play();
mySound.addEventListener("ended", function()
alert("The audio has ended");
);
);
【讨论】：
【参考方案2】：
<audio>和new Audio()应该是一样的，但看起来不一样 实际情况就是这样。每当我需要创建音频时 JavaScript 中的对象我实际上只是创建了一个元素 这个：
ended 事件是基于 .currentTime 属性创建的。 event-media-ended
canplaythrough 事件用于知道浏览器何时完成下载音频文件，我们可以播放
代码完成使用closest
<style type="text/css">
bodybackground: #aaa;color:#fff;
div
width: 100px;
height: 100px;
background: #dda;
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div >
</div>
<div >
</div>
<div >
</div>
<script type="text/javascript">
$(window).load(function()
var audioFiles = [
"http://www.soundjay.com/button/beep-01a.mp3",
"http://www.soundjay.com/button/beep-02.mp3",
"http://www.soundjay.com/button/beep-03.mp3",
"http://www.soundjay.com/button/beep-05.mp3"
];
function Preload(url)
var audio = new Audio();
// once this file loads, it will call loadedAudio()
// the file will be kept by the browser as cache
audio.addEventListener('canplaythrough', loadedAudio, false);
audio.src = url;
var loaded = 0;
function loadedAudio()
// this will be called every time an audio file is loaded
// we keep track of the loaded files vs the requested files
loaded++;
if (loaded == audioFiles.length)
// all have loaded
init();
var player = document.createElement('audio');
function playAudio(index)
player.src = audioFiles[index];
player.play();
function init()
$('div').click(function(event)
$(this).css('background', 'blue');
playAudio(Math.floor(Math.random()*audioFiles.length));
player.addEventListener("ended", function()
player.currentTime = 0;
$(event.target).closest('div').css('background', '#dda');
);
);
// We begin to upload files array
for (var i in audioFiles)
Preload(audioFiles[i]);
);
</script>
【讨论】：
非常完整的答案:) 这是上面引用的答案的链接***.com/a/21492698/4084574 我正在使用 'this' 元素来获取已单击的单个 div（因为页面上有很多是从 DB 动态创建的。对于播放前的初始更改样式，我可以只需使用“this”选择器，但由于第二个更改是在事件侦听器中的函数中，我如何将“this”值传递给该函数，或者如何获取相同的元素？ @Amit 我修改了我的答案，检查 我只是将 div ID 设置为外部函数中的变量，然后在事件侦听器中重用它。一切正常。以上是关于预加载音频并在播放期间应用 css的主要内容，如果未能解决你的问题，请参考以下文章