Question

我正在寻找创建声音按钮。

并实现它，以便按钮是div并从MySQL DB动态创建。

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

另外，我想在点击时将一个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>

Answer 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");
    });

});

Answer 2

<audio>和new Audio()应该相同，但看起来不一样在实践中就是这样。每当我需要创建音频时 JavaScript中的对象我实际上只是创建了一个元素这样：

结束事件是基于.currentTime属性创建的。 event-media-ended

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

代码完整使用closest

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

在播放期间预加载音频并应用css

2 个答案: