Javascript Django播放音频文件的问题

我在Django项目中使用Javascript制作音频播放器/可视化程序，但在单击链接时播放音频时遇到问题。在app.js中测试了一些小功能后，我可以看到它在HTML文件中工作，但由于某种原因，当我尝试播放音频时，它会说找不到支持的源，并且找不到我的音频文件。Javascript在另一个项目中运行良好，但我无法让它在Django中运行。我是Django的新手，所以任何帮助都会很好，谢谢

export default class AudioPlayer {
constructor(selector = '.audioPlayer', audio = []) {
    this.playerElement = document.querySelector(selector);
    this.audio = audio;
    this.currentAudio = null;
    this.createPlayerElements();
    this.audioContext = null;
}

createVisualiser() {
    this.audioContext = new AudioContext();
    const src = this.audioContext.createMediaElementSource(this.audioElement);
    const analyser = this.audioContext.createAnalyser();
    const canvas = this.visualiserElement;
    const ctx = canvas.getContext('2d');
    src.connect(analyser);
    analyser.connect(this.audioContext.destination);
    analyser.fftSize = 128;
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    const barWidth = (canvas.width / bufferLength) * 2.5;
    let barHeight;
    let bar;

    function renderFrame() {
        requestAnimationFrame(renderFrame);
        bar = 0;
        analyser.getByteFrequencyData(dataArray);
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        for (let i = 0; i < bufferLength; i++) {
            barHeight = dataArray[i] - 100;
            const r = barHeight + (50 * (i / bufferLength));
            ctx.fillStyle = `rgb(${r}, 100, 50)`;
            ctx.fillRect(bar, canvas.height - barHeight, barWidth, barHeight);
            bar += barWidth + 2;
        }
    }

    renderFrame();

}

createPlayerElements() {
    this.audioElement = document.createElement('audio');
    this.audioElement.crossOrigin = "anonymous";
    const playlistElement = document.createElement('div');
    playlistElement.classList.add('playlist');
    this.visualiserElement = document.createElement('canvas');

    this.playerElement.appendChild(this.audioElement);
    this.playerElement.appendChild(playlistElement);
    this.playerElement.appendChild(this.visualiserElement);
    this.createPlaylistElement(playlistElement);
}

createPlaylistElement(playlistElement) {
    this.audio.forEach(audio => {
        const audioItem = document.createElement('a');
        audioItem.classList.add('musicA');
        audioItem.href = audio.url;
        audioItem.innerHTML = `<i class="fa fa-play"></i>${audio.name}`;
        this.setupEventListener(audioItem);
        playlistElement.appendChild(audioItem);
    });
}

setupEventListener(audioItem) {
    audioItem.addEventListener('click', (e) => {
        e.preventDefault();

        if (!this.audioContext) {
            this.createVisualiser();
        }

        const isCurrentAudio = audioItem.getAttribute('href') == (this.currentAudio && this.currentAudio.getAttribute('href'));

        if (isCurrentAudio && !this.audioElement.paused) {
            this.setPlayIcon(this.currentAudio);
            this.audioElement.pause();
            console.log('paused');
        }
        else if (isCurrentAudio && this.audioElement.paused) {
            this.setPuaseIcon(this.currentAudio);
            this.audioElement.play();
        }
        else {
            if (this.currentAudio) {
                this.setPlayIcon(this.currentAudio);
            }
            this.currentAudio = audioItem;
            this.setPuaseIcon(this.currentAudio);
            this.audioElement.src = this.currentAudio.getAttribute('href');
            this.audioElement.play();
        }
    });
}

setPlayIcon(element) {
    const icon = element.querySelector('i');
    icon.classList.remove('fa-pause');
    icon.classList.add('fa-play');
}

setPuaseIcon(element) {
    const icon = element.querySelector('i');
    icon.classList.remove('fa-play');
    icon.classList.add('fa-pause');
}


}

musicPlayer.url：

urlpatterns = [
    path('', views.home, name="home")
]

和项目。URL：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('musicPlayer.urls')),
]

MusicLayer文件：

musicPlayer
|
|-__pycache__
|-migrations
|-static
|   |
|   |-css
|   |
|   |-javascript
|   |    |
|   |    |-app.js
|   |    |-AudioPlayer.js
|   |-songs
|-templates
|-urls.py
|-views.py
| ...

---

我不能完全确定，因为我看不到您的项目结构，但audioPlayer URL是否在MusicLayers应用程序中？还是不

看起来您没有在任何地方包含audioPlayer url…它们不在musicPlayers.url或项目url中，因此实际上，您试图转到他们项目找不到的url，因为您没有正确导入它

如果audioPlayer在该应用程序中，则需要将audioPlayer.url导入musicPlayer URL；如果它是自己的应用程序，则需要将其导入项目URL

---

希望这能解决404问题，您可能还需要创建一个视图，然后将视图连接到url。我不完全确定纯js函数如何处理URL。

感谢您的回复，AudioPlayer是MusicLayer文件夹中的Javascript文件，因此我不确定如何才能做到这一点。您可以，也许应该，将js文件导入模板，然后在mediaPlayer/views.py中创建一个视图（调用您创建的模板）然后在musicPlay/url.py中注册。然后在该模板中，可以像普通js一样在html中调用js来实现audioPlayer函数？这有意义吗？我想这就是我所做的，我有一个home.html，它扩展了base.html，其中我有一个脚本，类型为class='module'，src='static/javascript/app.js'。然后我有一个名为home的视图，它调用我的home模板。在app.js中测试了一些小功能后，我可以看到它在HTML文件中工作，但由于某种原因，当我尝试播放音频时，它会说找不到支持的源代码，也找不到我的音频文件。因此，如果脚本正在加载并工作，这听起来可能是javascript错误，而不是django错误。你有没有查过mp3文件的路径，用谷歌搜索过“无支持源”的意思？也许不是你的演讲者什么的

musicPlayer
|
|-__pycache__
|-migrations
|-static
|   |
|   |-css
|   |
|   |-javascript
|   |    |
|   |    |-app.js
|   |    |-AudioPlayer.js
|   |-songs
|-templates
|-urls.py
|-views.py
| ...