Bir düğmeye tıklandığında jQuery kullanarak bir ses dosyası oynatın

Question 1

Düğmeye tıkladığımda bir ses dosyası çalmaya çalışıyorum ama çalışmıyor, html kodum:

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

JavaScript'im:

$('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();
        });
    });
});

Bunun için de bir Fiddle yarattım .

Question 2

Hangi yaklaşım?

<audio>Veya <object>veya etiketiyle ses çalabilirsiniz <embed>. Tembel yükleme (ihtiyacınız olduğunda yükleyin), boyutu küçükse ses en iyi yaklaşımdır. Ses öğesini dinamik olarak oluşturabilir, yüklendiğinde onu başlatabilir .play()ve duraklatabilirsiniz .pause().

Kullandığımız şeyler

canplayDosyamızın oynatılmaya hazır olduğunu tespit etmek için olayı kullanacağız .

.stop()Ses öğeleri için işlev yoktur . Sadece onları durdurabiliriz. Ve ses dosyasının başından başlamak istediğimizde, onun .currentTime. Bu satırı örneğimizde kullanacağız audioElement.currentTime = 0;. İşlevi elde etmek için .stop()önce dosyayı duraklatıp ardından zamanını sıfırlarız.

Ses dosyasının uzunluğunu ve geçerli çalma süresini bilmek isteyebiliriz. Kullandığımız .currentTimeuzunluğunu öğrenmek için yukarıda zaten öğrendik .duration.

Örnek Kılavuz

Belge hazır olduğunda dinamik olarak bir ses öğesi oluşturduk
Kaynağını çalmak istediğimiz sesle belirledik.
Dosyayı yeniden başlatmak için 'sona erdi' olayını kullandık.

CurrentTime, süresine eşit olduğunda ses dosyası çalmayı durdurur. Ne zaman kullanırsanız kullanın play(), baştan başlayacaktır.

timeupdateOlay, ses her .currentTimedeğiştiğinde geçerli saati güncellemek için kullandık .
canplayDosya oynatılmaya hazır olduğunda bilgileri güncellemek için olay kullandık .
Oynatmak, duraklatmak, yeniden başlatmak için düğmeler oluşturduk.

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

Snippet'i genişlet

Question 3

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

$("#myAudioElement").play()Beklediğiniz gibi çalışmıyor . Resmi neden, onu jQuery'ye dahil play()etmenin her bir öğeye bir yöntem ekleyeceği ve bu da gereksiz ek yüklere neden olacağıdır. Bu nedenle, bunun yerine getirdiğiniz DOM öğeleri dizisindeki konumuna $("#myAudioElement"), yani 0'a göre başvurmanız gerekir .

Bu alıntı, kendisiyle ilgili olarak gönderilen ve "özellik / wontfix" olarak kapatılan bir hatadan alınmıştır:

Bunu yapmak için, her DOM öğesi yöntem adı için bir jQuery yöntem adı eklememiz gerekir. Ve elbette bu yöntem medya dışı öğeler için hiçbir şey yapmaz, bu yüzden alacağı ekstra bayta değecek gibi görünmüyor.

Question 4

Bunu izleyen başka biri için, Ahmet'in cevabını aldım ve orijinal sorucunun jsfiddle'ını burada değiştirerek değiştirdim:

audio.mp3

için

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

web dışında ücretsiz olarak kullanılabilen bir mp3'e bağlanma. Kolay çözümü paylaştığınız için teşekkür ederiz!

Question 5

Burada, geri dönüşlü güzel ve çok yönlü bir çözümüm var:

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

Bundan sonra istediğiniz kadar sesi başlatabilirsiniz:

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

Artık basit etkinlik çağrılarıyla istediğiniz yerde başlatılmış ses öğesine ulaşabilirsiniz.

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

JSFiddle Gösterisi

JQuery ile kullandığım şey bu:

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

Question 7

Ne dersin:

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

Snippet'i genişlet