Php 在播放过程中预加载音频并应用css_Php_Jquery_Html_Css_Audio

Php 在播放过程中预加载音频并应用css

php jquery html css audio

Php 在播放过程中预加载音频并应用css,php,jquery,html,css,audio,Php,Jquery,Html,Css,Audio,我正在寻找创建声音按钮我在这里使用了答案：并实现了它，以便按钮是div，并从MySQL数据库动态创建有人知道如何在页面加载时预加载声音列表吗另外，我希望在单击时将CSS类应用于div，然后在音频结束时，希望它切换回原始CSS类这就是我尝试过的。声音播放正确，但合一功能无法启动 <script type='text/javascript'> $(window).load(function(){ var baseUrl = "http://[URL H

我正在寻找创建声音按钮

我在这里使用了答案：

并实现了它，以便按钮是div，并从MySQL数据库动态创建

有人知道如何在页面加载时预加载声音列表吗

另外，我希望在单击时将CSS类应用于div，然后在音频结束时，希望它切换回原始CSS类

这就是我尝试过的。声音播放正确，但合一功能无法启动

    <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>


$（窗口）。加载（函数（）{
var baseUrl=“http://[URL HERE]”；
var audio=[]；
$（'div.ci'）。单击（函数（）{
var i=$（this.attr（'id'）.substring（1）；
mySound=新音频（baseUrl+Audio[i-1]）.play（）；
mySound.onended=函数（）{
警报（“音频已结束”）；}；
});
});

如果您使用的是HTML5音频，您可以执行以下操作：

 mySound.addEventListener("ended", function() 
 {
      alert("The audio has ended");
 });

编辑：

尝试更改创建音频标记的方式（如所引用）


该事件用于了解浏览器何时完成音频文件下载，我们可以播放
代码完成使用

正文{背景：#aaa；颜色：#fff；}
div
{
宽度：100px；
高度：100px；
背景：dda；
}
$（窗口）。加载（函数（）{
var音频文件=[
"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"
];
函数预加载（url）{
var audio=新音频（）；
//加载此文件后，它将调用loadedAudio（）
//该文件将由浏览器保留为缓存
audio.addEventListener（'canplaythrough'，loadedAudio，false）；
audio.src=url；
}
var=0；
函数loadeAudio（）{
//每次加载音频文件时都会调用此函数
//我们跟踪加载的文件和请求的文件
加载++；
如果（已加载==audioFiles.length）{
//都装了
init（）；
}
}
var player=document.createElement（'audio'）；
功能播放音频（索引）{
player.src=音频文件[索引]；
player.play（）；
}
函数init（）{
$（'div'）。单击（函数（事件）{
$（this.css（'background'，'blue'）；
播放音频（Math.floor（Math.random（）*audioFiles.length））；
player.addEventListener（“结束”，函数（）{
player.currentTime=0；
$（event.target）.closest（'div'）.css（'background'，'#dda'）；
});
});
}
//我们开始上传文件数组
用于（音频文件中的var i）{
预加载（音频文件[i]）；
}
});
非常完整的答案：）这是上面引用的答案的链接，我正在使用“this”元素拾取已单击的单个div（因为页面上有很多是从DB动态创建的。对于播放前的初始更改样式，我可以使用“this”选择器，但是由于第二个更改在事件侦听器中的函数中，我如何将“this”值传递到该函数中，或者如何拾取相同的元素？@Amit我修改了答案，check我只是在外部函数中将div ID设置为一个变量，然后在事件侦听器中重用它。所有这些都正常工作。
$('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");
    });

});

<style type="text/css">
    body{background: #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>