BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ボタンがクリックされたら、jQueryで音声ファイルを再生する

2022-03-12 09:34:53

質問

ボタンをクリックするとオーディオファイルを再生しようとしているのですが、うまくいきません。私のhtmlコードは以下の通りです。 

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

私のJavaScriptは: 

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

を作成しました。 フィドル にも対応しています。

解決方法は？

どのようなアプローチで？

で音声を再生することができます。 <audio> タグまたは <object> または <embed> . サウンドのサイズが小さい場合は、レイジーローディング（必要なときに読み込む）が最適な方法です。audio 要素は動的に作成することができ、読み込まれたときに .play() で一時停止し .pause() .

使用したもの

使用するのは canplay イベントを使用して、ファイルを再生する準備ができたことを検出します。

はありません。 .stop() 関数は、audio 要素のためのものです。一時停止しかできません。そして、オーディオファイルの先頭から始めたいときは、オーディオファイルの .currentTime . この例では、次の行を使用します。 audioElement.currentTime = 0; . を実現するために .stop() 関数では、まずファイルを一時停止し、その時間をリセットします。

オーディオファイルの長さと現在の再生時間を知りたい場合があります。私たちはすでに .currentTime 上記のように、その長さを知るには .duration .

ガイド例

  1. ドキュメントの準備ができたら、audio 要素を動的に作成しました。
  2. そのソースに、再生したい音声を設定します。
  3. ended'イベントを使って、ファイルを再スタートさせました。
<ブロッククオート

currentTimeが継続時間と同じになると、オーディオファイルは停止します。 を再生します。このとき play() の場合、最初から始まります。

  1. 私たちは timeupdate イベントを使用して現在時刻を更新します。 .currentTime を変更します。
  2. を使用しました。 canplay イベントを使用して、ファイルが再生可能な状態になったときに情報を更新します。
  3. 再生、一時停止、再開のボタンを作成しました。 

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します