Загружайте внешние файлы в поля HTML audio и textarea, используя JQuery - PullRequest
Новая
       17

Загружайте внешние файлы в поля HTML audio и textarea, используя JQuery

0 голосов
/ 26 марта 2019

Я пытаюсь загрузить внешние файлы в поля аудио и текста HTML одновременно при нажатии кнопки загрузки.В идеале нужна кнопка clear (), чтобы можно было очистить поля и загрузить другой набор URL.

Код jQuery, который я вставил в код для ссылки и закомментировал, кажется, работает, но HTML-аудионе загружается полностью в проигрыватель, даже если он показывает загруженный в исходном коде. 

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            text-align: center;
        }
        #btn {
            width: 50%;
            margin-bottom: 10px;
        }

        #audioplayer {
            width: 50%;
            margin-bottom: 10px;
        }

        #mp3 {
            width: 50%;
            margin-bottom: 10px;
        }

        #txt {
            width: 50%;
            margin-bottom: 10px;
        }

        #mytextbox {
            width: 50%;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <button id="btn" type="button">Load external MP3 and TXT urls from input boxes to the audioplayer and textbox</button>
    <button id="clearbtn" type="button">Clear MP3 and textarea contents</button>

    <audio id="audioplayer" controls>
        <!--<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.-->
        <source id="mp3url" src="" type="audio/mpeg"> Your browser does not support the audio element.
    </audio>

    <input name="mp3" type="url" id="mp3" class="mp3" placeholder="URL of MP3">
    <input name="txt" type="url" id="txt" class="txt" placeholder="URL of TXT file">

    <textarea id="mytextbox" rows="10" cols="50" placeholder="Textarea, soon to hold external .txt content"></textarea>

    <!--
    JQUERY
    $('#mytextbox').load("https://www.w3.org/TR/PNG/iso_8859-1.txt");
    $("#mp3").keyup(function(){
        var inputVal = $(this).val();
        $("#mp3url").attr("src", inputVal);
    });

    EXTERNAL FILE URLS
    https://www.w3schools.com/html/horse.mp3
    https://www.w3.org/TR/PNG/iso_8859-1.txt

    TESTS
    https://jsfiddle.net/2ogfxqLu/1/
    -->

</body>

</html>

Вот пример страницы:

https://loadtxtmp3intofields.netlify.com/

FLOW: URL-адреса внешних файлов вставляются в поля ввода, затем нажимается кнопка заголовка, и соответствующее содержимое файла загружается в текстовую область и аудиоплеер.

ИСПОЛЬЗУЕМЫЙ РЕЗУЛЬТАТ: загрузка и очистка полей с помощью кнопок на одной кнопкевремя.

...