เล่นไฟล์เสียงโดยใช้ 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":

ในการทำเช่นนั้นเราต้องเพิ่มชื่อเมธอด jQuery สำหรับชื่อเมธอดองค์ประกอบ DOM แต่ละชื่อ และแน่นอนว่าวิธีนั้นจะไม่ทำอะไรเลยสำหรับองค์ประกอบที่ไม่ใช่สื่อดังนั้นจึงดูเหมือนว่ามันจะไม่คุ้มค่ากับไบต์พิเศษที่ต้องใช้

Question 4

สำหรับใครก็ตามที่ทำตามฉันเพียงแค่ใช้คำตอบของ Ahmet และอัปเดต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>

ขยายข้อมูลโค้ด