2013-12-19 112 views
0

我想用我的Django代碼使用一些JavaScript,但有一個小問題從第二個js文件調用函數。Django的JavaScript變量問題

我使用的代碼從這裏https://github.com/mattdiamond/Recorderjs

我把html文件馬特提出並刪除頁眉和創建Django模板,然後把javascript文件與我的其他靜態文件。這些文件(twitter bootstrap)一切正常。

如果我打開工作表,它可以正常加載記錄和停止按鈕。如果按它們,它們會記錄在日誌中,但應該在recorderWorker.js中調用的任何函數都將被忽略。所以我無法保存文件或看到它。

據我可以告訴它永遠不會調用第二個JavaScript文件。如果我在alerter.js中放置了警告框,則什麼都不會發生,但它們在Recorder.js中工作。

var WORKER_PATH = 'recorderWorker.js'; 
var Recorder = function(source, cfg){ 

我知道這是不是因爲與我測試它使用另一個Python Web服務器(SimpleHTTPServer)代碼中的問題,它的偉大工程。

我沒有更改js文件,只爲html創建此模板。

{% load staticfiles %} 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Live input record and playback</title> 
    <style type='text/css'> 
    ul { list-style: none; } 
    #recordingslist audio { display: block; margin-bottom: 10px; } 
    </style> 
</head> 

然後將HTML文件

{% extends "base_record.html" %} 

{% block content %} 

    <h1>Recorder.js simple WAV export example</h1> 

    <p>Make sure you are using a recent version of Google Chrome, at the moment this only works with Google Chrome Canary.</p> 
    <p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p> 

    <button onclick="startRecording(this);">record</button> 
    <button onclick="stopRecording(this);" disabled>stop</button> 

    <h2>Recordings</h2> 
    <ul id="recordingslist"></ul> 

    <h2>Log</h2> 
    <pre id="log"></pre> 

    <script> 
    function __log(e, data) { 
    log.innerHTML += "\n" + e + " " + (data || ''); 
    } 

    var audio_context; 
    var recorder; 

    function startUserMedia(stream) { 
    var input = audio_context.createMediaStreamSource(stream); 
    __log('Media stream created.'); 

    input.connect(audio_context.destination); 
    __log('Input connected to audio context destination.'); 

    recorder = new Recorder(input); 
    __log('Recorder initialised.'); 
    } 

    function startRecording(button) { 
    // alert("start recording") 
    recorder && recorder.record(); 
    button.disabled = true; 
    button.nextElementSibling.disabled = false; 
    __log('Recording...'); 
    } 

    function stopRecording(button) { 
    // alert("Stopped recording") 
    recorder && recorder.stop(); 
    button.disabled = true; 
    button.previousElementSibling.disabled = false; 
    __log('Stopped recording.'); 

    // create WAV download link using audio data blob 
    createDownloadLink(); 

    recorder.clear(); 
    } 

    function createDownloadLink() { 
    recorder && recorder.exportWAV(function(blob) { 
     alert("download link") 
     var url = URL.createObjectURL(blob); 
     var li = document.createElement('li'); 
     var au = document.createElement('audio'); 
     var hf = document.createElement('a'); 

     au.controls = true; 
     au.src = url; 
     hf.href = url; 
     hf.download = new Date().toISOString() + '.wav'; 
     hf.innerHTML = hf.download; 
     li.appendChild(au); 
     li.appendChild(hf); 
     recordingslist.appendChild(li); 
    }); 
    } 

    window.onload = function init() { 
    try { 
     // webkit shim 
     window.AudioContext = window.AudioContext || window.webkitAudioContext; 
     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia; 
     window.URL = window.URL || window.webkitURL; 

     audio_context = new AudioContext; 
     __log('Audio context set up.'); 
     __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!')); 
    } catch (e) { 
     alert('No web audio support in this browser!'); 
    } 

    navigator.getUserMedia({audio: true}, startUserMedia, function(e) { 
     __log('No live audio input: ' + e); 
    }); 
    }; 
    </script> 

{% endblock %} 

     <body> 
     {% block content %} 
     {% endblock %} 

      <script type="text/javascript" src="{% static 'bootstrap/js/recorder.js' %}"></script> 
    </body> 
</html> 

這裏是我的settings.py

# Absolute path to the directory static files should be collected to. 
# Don't put anything in this directory yourself; store your static files 
# in apps' "static/" subdirectories and in STATICFILES_DIRS. 
# Example: "/var/www/example.com/static/" 
STATIC_ROOT = '' 

# URL prefix for static files. 
# Example: "http://example.com/static/", "http://static.example.com/" 
STATIC_URL = '/static/' 

# Additional locations of static files 
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static" 
    # Always use forward slashes, even on Windows. 
    # Don't forget to use absolute paths, not relative paths. 
    '/home/kevin/Programming/accent/static/', 
) 

回答

0

我也遇到因recorderWorker.js沒有被訪問的類似的問題。

'static/filename/recorderWorker.js' 

注:假設你的JS文件所在的文件夾「文件名」,這是靜態文件夾但是,當我做了以下的問題得到解決。

就Django而言,它會將靜態文件(如JS文件)查找到靜態文件夾中,因爲您沒有指定它沒有加載文件的路徑。