在移动设备上播放 CDN Soundfonts

Posted

技术标签:

【中文标题】在移动设备上播放 CDN Soundfonts【英文标题】:Playing CDN Soundfonts on Mobile Devices 【发布时间】:2019-06-28 02:57:27 【问题描述】:

我开发了我的第一个 Laravel Web 应用程序,您可以在以下位置找到它:www.sharpguitartraining.com,它使用来自gleitz/midi-js-soundfonts CDN 的 .mp3 文件一次弹奏一个吉他音符,它在台式电脑上运行良好,但在 iosandroid 设备中完全静音。

这就是我在网站上播放声音的方式:

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

我没有得到答案,但我发现了问题所在。我正在调用 gleitz/midi-js-soundfonts,其 CDN 位于我网站的 http:// 协议中,该协议位于 https:// 协议中,因此 Chrome 阻止了呼叫,因为显然您不允许呼叫不安全的来自安全 https 站点的 http CDN。这在 Chrome 的开发控制台上是非常明确的。 希望这对其他人有帮助。 干杯!

【讨论】:

以上是关于在移动设备上播放 CDN Soundfonts的主要内容,如果未能解决你的问题,请参考以下文章

Youtube API:搜索可在移动设备上播放的视频

Soundcloud 移动设备上的嵌入式播放器

在 Windows 移动设备上播放声音文件(特别是 .wav)

检测在移动设备上离开全屏 iframe

Soundfonts 播放 MIDI 文件没有衰减

React (HTML) 视频标签不会在移动设备上自动播放