ボタンがクリックされたときにjQueryを使用してオーディオファイルを再生する

Question 1

ボタンをクリックしたときにオーディオファイルを再生しようとしていますが、機能しません。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();
        });
    });
});

私もそのためのフィドルを作成しました。

Question 2

どちらのアプローチですか？

<audio>タグまたは<object>またはでオーディオを再生でき<embed>ます。遅延読み込み（必要なときに読み込む）は、サイズが小さい場合に最適な方法です。オーディオ要素を動的に作成できます。読み込まれると.play()、開始して一時停止でき.pause()ます

使用したもの

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

.stop()オーディオ要素には機能がありません。一時停止することしかできません。また、オーディオファイルの先頭から開始する場合は、そのを変更し.currentTimeます。この例では、この行を使用しますaudioElement.currentTime = 0;。.stop()機能を実現するには、最初にファイルを一時停止し、次に時間をリセットします。

オーディオファイルの長さと現在の再生時間を知りたい場合があります。.currentTime使用する長さを学習するために、すでに上記で学習しました.duration。

ガイドの例

ドキュメントの準備ができたら、音声要素を動的に作成しました
再生するオーディオでソースを設定します。
「終了」イベントを使用して、ファイルを再度開始しました。

currentTimeがその継続時間と等しい場合、オーディオファイルは再生を停止します。を使用するたびにplay()、最初から開始されます。

timeupdateイベントを使用して、音声.currentTimeが変化するたびに現在時刻を更新しました。
canplayファイルを再生する準備ができたら、イベントを使用して情報を更新しました。
再生、一時停止、再起動するボタンを作成しました。

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

スニペットを展開

Question 3

$("#myAudioElement")[0].play();

$("#myAudioElement").play()期待どおりに動作しません。公式の理由は、それをjQueryに組み込むとplay()、すべての要素にメソッドが追加され、不要なオーバーヘッドが発生するためです。したがって、代わりに、取得するDOM要素の配列内の位置、つまり$("#myAudioElement")0で参照する必要があります。

この引用は、それに関して送信されたバグからのものであり、「feature / wontfix」としてクローズされました。

そのためには、DOM要素のメソッド名ごとにjQueryメソッド名を追加する必要があります。そしてもちろん、そのメソッドは非メディア要素に対しては何もしないので、余分なバイトを使用する価値があるとは思えません。

Question 4

それに続く他の人のために、私は単にアフメットの答えを取り、元のアスカーのjsfiddleをここに更新しました：

audio.mp3

ために

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

ウェブから無料で入手できるmp3にリンクする。簡単な解決策を共有していただきありがとうございます！

Question 5

私はここにフォールバックを備えた素敵で用途の広いソリューションを持っています：

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

その後、好きなだけオーディオを初期化できます：

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

これで、初期化されたオーディオ要素に到達することができます。

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

JSFiddleのデモ

これは私がJQueryで使用するものです：

$('.button').on('click', function () { 
    var obj = document.createElement("audio");
        obj.src = "linktoyourfile.wav"; 
        obj.play(); 
});

Question 7

何について：

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

スニペットを展開