我在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.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
相关问题 更多 >
编程相关推荐