Відтворюйте аудіофайл за допомогою 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.

Ця цитата з помилки, про яку було надіслано , і яка була закрита як "особливість / виправлення":

Для цього нам потрібно додати ім'я методу jQuery для кожного імені методу елемента DOM. І, звичайно, цей метод нічого не зробив би для елементів, що не є медіа, тому, здається, він не коштував би зайвих байтів.

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>

Розгорніть фрагмент