Phát tệp âm thanh bằng jQuery khi nhấp vào nút

Question 1

Tôi đang cố phát tệp âm thanh khi tôi nhấp vào nút, nhưng nó không hoạt động, mã html của tôi là:

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

JavaScript của tôi là:

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

Tôi cũng đã tạo ra một Fiddle cho điều đó.

Question 2

Cách tiếp cận nào?

Bạn có thể phát âm thanh bằng <audio>thẻ hoặc <object>hoặc <embed>. Tải chậm (tải khi bạn cần) âm thanh là cách tiếp cận tốt nhất nếu kích thước của nó nhỏ. Bạn có thể tạo động phần tử âm thanh, khi phần tử được tải, bạn có thể bắt đầu .play()và tạm dừng phần tử đó .pause().

Những thứ chúng tôi đã sử dụng

Chúng tôi sẽ sử dụng canplaysự kiện để phát hiện tệp của chúng tôi đã sẵn sàng để phát.

Không có .stop()chức năng cho các phần tử âm thanh. Chúng tôi chỉ có thể tạm dừng chúng. Và khi chúng tôi muốn bắt đầu từ đầu tệp âm thanh, chúng tôi thay đổi nó .currentTime. Chúng tôi sẽ sử dụng dòng này trong ví dụ của chúng tôi audioElement.currentTime = 0;. Để đạt được .stop()chức năng trước tiên, chúng tôi tạm dừng tệp sau đó đặt lại thời gian của nó.

Chúng tôi có thể muốn biết độ dài của tệp âm thanh và thời gian phát hiện tại. Chúng ta đã học .currentTimeở trên, để tìm hiểu độ dài của nó mà chúng ta sử dụng .duration.

Hướng dẫn ví dụ

Khi tài liệu đã sẵn sàng, chúng tôi đã tạo động một phần tử âm thanh
Chúng tôi đặt nguồn của nó bằng âm thanh mà chúng tôi muốn phát.
Chúng tôi đã sử dụng sự kiện 'đã kết thúc' để bắt đầu lại tệp.

Khi Thời lượng hiện tại bằng với thời lượng của nó, tệp âm thanh sẽ ngừng phát. Bất cứ khi nào bạn sử dụng play(), nó sẽ bắt đầu lại từ đầu.

Chúng tôi đã sử dụng timeupdatesự kiện để cập nhật thời gian hiện tại bất cứ khi nào âm thanh .currentTimethay đổi.
Chúng tôi đã sử dụng canplaysự kiện để cập nhật thông tin khi tệp đã sẵn sàng để phát.
Chúng tôi đã tạo các nút để phát, tạm dừng, khởi động lại.

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

Mở rộng đoạn mã

Question 3

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

Nó không hoạt động $("#myAudioElement").play()như bạn mong đợi. Lý do chính thức là việc kết hợp nó vào jQuery sẽ thêm một play()phương thức vào mọi phần tử, điều này sẽ gây ra chi phí không cần thiết. Vì vậy, thay vào đó bạn phải tham chiếu đến nó theo vị trí của nó trong mảng các phần tử DOM mà bạn đang truy xuất $("#myAudioElement"), hay còn gọi là 0.

Trích dẫn này là từ một lỗi đã được gửi về nó , đã bị đóng là "tính năng / wontfix":

Để làm điều đó, chúng ta cần thêm một tên phương thức jQuery cho mỗi tên phương thức phần tử DOM. Và tất nhiên phương pháp đó sẽ không làm gì đối với các phần tử không phải phương tiện nên có vẻ như nó không đáng giá bằng số byte thừa mà nó sẽ mất.

Question 4

Đối với bất kỳ ai khác theo dõi, tôi chỉ cần lấy câu trả lời của Ahmet và cập nhật jsfiddle ban đầu của người hỏi tại đây , thay thế:

audio.mp3

cho

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

liên kết trong một mp3 miễn phí có sẵn trên web. Cảm ơn bạn đã chia sẻ giải pháp dễ dàng!

Question 5

Tôi ở đây có một giải pháp hay và linh hoạt với dự phòng:

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

Sau đó, bạn có thể khởi tạo bao nhiêu âm thanh tùy thích:

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

Giờ đây, bạn có thể tiếp cận phần tử âm thanh đã khởi tạo ở bất kỳ đâu bạn thích bằng các lệnh gọi sự kiện đơn giản như

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

Question 6

Trình diễn JSFiddle

Đây là những gì tôi sử dụng với JQuery:

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

Question 7

Thế còn:

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

Mở rộng đoạn mã