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');
}


}

然后我在我的 app.js 中创建了一个新的 AudioPlayer：

import AudioPlayer from './AudioPlayer.js';

const audioPlayer = new AudioPlayer('.audioPlayer', [
    { url: "musicPlayer/static/songs/song1.mp3", name: "abc" },
]);

musicPlayer.urls：

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

和项目.urls：

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

音乐播放器文件：

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

标签： javascriptpythonhtmldjango

javascript - Django 播放音频文件的问题

问题描述

解决方案

推荐阅读