javascript - 播放音频文件的 JavaScript 函数

Question

我想要一种干净的方式来编写一个 JavaScript 函数，该函数在对#div元素的特定点击时触发并触发声音文件，而无需循环。无论如何要编写一个抓取声音文件，播放然后停止的函数。它将与每次点击存在的大量功能分开，并分配给用户完成的自定义点击次数；在一个特定的#main_div按钮上。

.show .hide目前我有一个在函数中使用显示“播放按钮”的解决方案。

JS：

function function8() {
    $("#area1").hide(0).delay(1500).show(0);
    $("#area2").hide(0).delay(1500).show(0);
    $("#sound1").show(0).delay(1500).hide(0); // This one 
// I would like the above to directly play the sound when fired. Not overlay a new play button.

加价：

<div id="sound1"><div>
<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>
</div></div>

但这需要额外的“点击”才能播放；而且我不想要一个特定于这个音频播放的按钮。我希望它通过主#main_div框按钮存在；单击时将出现所有功能；本质上我想要；说 Click = 3 自动“播放声音文件”，无需额外步骤。

Answer 1

<audio>因此，您不想显示播放元素的播放按钮，而是onclick只想播放<audio>元素？

好吧，你已经有了 JavaScript。你只需要在你的函数中调用它。

function function8() {

    // this code shows some areas
    $("#area1").hide(0).delay(1500).show(0);
    $("#area2").hide(0).delay(1500).show(0);

    // this code hides the sound player and control buttons
    $("#sound1").show(0).delay(1500).hide(0);

    // this is the same line you have bound to your play button
    // it simply plays the audio element
    document.getElementById("id1").play();
}

此外，您正在使用 jQuery！所以没必要document.getElementById发疯。

$("#id1").get(0).play();

Answer 2

当事物相互碰撞时，我正在使用此功能播放声音。你可以在http://www.jellyrobotics.com/2013/01/16/box-2d/看到一个例子。重叠最大变量允许一次播放声音文件的多次迭代。换句话说，您可以在前一个实例完成之前再次开始播放。

var JellySoundInstace = 0;
var JellySound = function( audiofile )
    {
    // should be optional variable because not all objects have the ability
    // to play multiple times and possibly overlap. For example, the explosion sound
    // from a single tank blowing up will only play one time for that tank instance
    //
    var overlapMax = 3;


    // PRIVATE instance variables here
    //
    var tracks = new Array();
    var soundID = "jellysound" + JellySoundInstace++;
    var track = 0;


    this.load = function( audiofile )
        {
        var i;

        for ( i=0; i<overlapMax; i++ )
            {
            var object = null;

            if ( ieVersion(8) )
                {
                object = document.createElement('div');

                var iesound = '';
                iesound = iesound + '<object id="'+soundID+'track'+i+'" type="audio/x-wav" data="'+audiofile+'" width="200" height="16">';
                iesound = iesound + '<param name="src" value="'+audiofile+'" />';
                iesound = iesound + '<param name="volume" value="2" />';
                iesound = iesound + '<param name="autoplay" value="false" />';
                iesound = iesound + '<param name="autostart" value="0" />';
                iesound = iesound + '<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />';
                iesound = iesound + '</object>';

                object.id = soundID+'track'+i+'div';
                object.innerHTML = iesound;
                object.style.visibility = 'hidden';
                object.style.position = 'absolute';
                object.style.left = '0px';
                object.style.top = '0px';
                }
            else
                {
                object = document.createElement('audio');
                object.setAttribute('id',soundID+'track'+i);
                object.setAttribute('src',audiofile);
                }

            document.body.appendChild( object );

            var newsound = document.getElementById(soundID+'track'+i);

            // needs to be handled with a method & params
            //
            newsound.volume = 0.02;

            tracks.push( newsound );
            }
        }


    this.play = function()
        {
        if ( tracks.length==0 )
            return;

        if ( ieVersion(8) )
            {
            tracks[track].Play();
            track++;
            track%=tracks.length;
            return;
            }

        tracks[track].play();
        track++;
        track%=tracks.length;
        }

    this.load( audiofile );

    return this;
    }

function ieVersion( iecheck )
    {
    if ( !(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) )
        return 0;

    var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number

    return (ieversion <= iecheck);
    }

// Sample Usage
//
var collisionSound = new JellySound( "dink.wav" );

collisionSound.play();