2

画像リンクをクリックするとトラックが再生され、もう一度クリックすると停止したいと思います。私は HTML5 を使用しておらず、オーディオ タグも使用しておらず、トラックの再生中にプレーヤーを表示したくありません。そして、これは可能な限りクロスブラウザでなければなりません...

クリックするとトラックが聞こえ、もう一度クリックすると停止します。

これについて私が見つけたすべてのチュートリアルには、HTML5 とその新しいタグ、フラッシュ、または必要のないカラフルなプレーヤーが含まれているため、十分に単純ですが単純すぎると思います。

どうすればこれを達成できますか？純粋な JavaScript または Jquery は問題ありません。

助けてくれてありがとう

4

1 に答える 1

3

HTML5 オーディオ タグを使用していない特定の理由はありますか? コントロールを表示しないように設定し、JavaScript を使用して再生/停止に同じものを使用し、必要に応じて画像を再生から停止に切り替えることができるためです。jQuery を使用:

あなたはこの画像を持っています：

<a href="#" id="audioPlayStop" title="stop">
    <img src="images/stop.png" />
</a>

そして、この目に見えないオーディオ タグ:

<audio id="audio">
<source src="somethingtoplay.mp3" type="audio/mpeg" />
</audio>

var audio = document.getElementById('audio'); // $('#audio') won't work for audio API!
    $('#audioPlayStop').toggle( 

        function () {


            $(this).attr('title', 'play');
            $(this).add('img').attr('src', 'images/play.png');

            audio.pause();

            console.log('Paused');
        }, 
        function () {
            $(this).attr('title', 'stop');
            $(this).add('img').attr('src', 'images/stop.png');

            audio.play();           

            console.log('Play started');
        } //function
    );

このスクリプトは、停止するのではなく、実際に一時停止します。しかし、audio.src = ''; で停止できることを知っていれば、停止する方法を理解できます。audio.load(); // 何もロードしないので停止します (オーディオ API には stop() はありません)

于 2013-02-25T18:06:47.240 に答える