Воспроизведение звуковых шрифтов CDN на мобильных устройствах - PullRequest
Новая
       50

Воспроизведение звуковых шрифтов CDN на мобильных устройствах

0 голосов
/ 28 июня 2019

Я разработал мое первое веб-приложение Laravel, которое вы можете найти по адресу: www.sharpguitartraining.com и которое использует файлы .mp3 из gleitz / midi-js-soundfonts CDN для воспроизведения гитарных нот по одному, и он отлично работает на настольных компьютерах, но абсолютно бесшумен как на iOS, так и на Android устройствах.

Вот как я играю звуки на сайте: 

    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/inc/shim/Base64.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/inc/shim/Base64binary.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/inc/shim/WebAudioAPI.js"></script>
    <!-- midi.js package -->
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/midi/audioDetect.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/midi/gm.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/midi/loader.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/midi/plugin.audiotag.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/midi/plugin.webaudio.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/midi/plugin.webmidi.js"></script>
    <!-- utils -->
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/util/dom_request_xhr.js"></script>
    <script src="https://cdn.rawgit.com/mudcube/MIDI.js/a8a84257/js/util/dom_request_script.js"></script>

function playNote_CDN(note, sonido_id, velocity, delay, mensaje) {
        var instrument_name = sonido_id ? $('#sonidos')[0].options[sonido_id].text : $('#sonidos')[0].selectedOptions[0].text;
        var delay = delay ? delay : 0; // play one note every quarter second
        var velocity = velocity ? velocity : 127; // how hard the note hits
        var note = note ? note - 1 : 61;
        var volumen = $('#volumen').val() / 100 * 127;
            MIDI.loadPlugin({
                soundfontUrl: "http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/",
                instrument: instrument_name,
                onprogress: function(state, progress) {
                },
                onsuccess: function () {
                    if (mensaje) {
                        muestraMensaje("Instrumento " + instrument_name + " cargado.", 3);
                    }
                    MIDI.programChange(0, MIDI.GM.byName[instrument_name].number);
                    MIDI.setVolume(0, volumen);
                    MIDI.noteOn(0, note, velocity, delay);
                    MIDI.noteOff(0, note, delay + 1);
                }
            }); 
    }

Понятия не имею, как поступить, поэтому любая помощь очень ценится.

Спасибо!

1 Ответ

0 голосов
/ 10 июля 2019

Я не получил ответа, но выяснил проблему. Я звонил gleitz / midi-js-soundfonts, чей CDN находится в протоколе http: // моего сайта, который находится в протоколе https: //, так что Chrome блокировал вызов, так как, очевидно, вы не можете вызывать незащищенного http CDN с безопасного сайта https. Это явно указано в консоли разработчика Chrome. Надеюсь, это поможет кому-то еще. Ура!

...