当前位置：首页 > JavaScript

js实现播放

2026-03-14 02:09:04JavaScript

使用HTML5 Audio API播放音频

HTML5的<audio>元素和JavaScript结合可以轻松实现音频播放功能。以下是一个基本实现示例：

// 创建Audio对象
const audio = new Audio('audio-file.mp3');

// 播放音频
audio.play();

// 暂停音频
audio.pause();

// 设置音量(0-1)
audio.volume = 0.5;

控制播放状态

可以通过事件监听器来监控播放状态：

audio.addEventListener('play', () => {
    console.log('音频开始播放');
});

audio.addEventListener('ended', () => {
    console.log('音频播放结束');
});

audio.addEventListener('error', () => {
    console.error('音频加载失败');
});

使用Web Audio API实现高级功能

Web Audio API提供更专业的音频处理能力：

// 创建音频上下文
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// 获取音频数据
fetch('audio-file.mp3')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
    .then(audioBuffer => {
        // 创建音频源
        const source = audioContext.createBufferSource();
        source.buffer = audioBuffer;

        // 连接输出
        source.connect(audioContext.destination);

        // 开始播放
        source.start();
    });

实现播放列表功能

可以通过数组管理多个音频文件：

const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentTrack = 0;

function playTrack(index) {
    if (index >= 0 && index < playlist.length) {
        currentTrack = index;
        audio.src = playlist[currentTrack];
        audio.play();
    }
}

// 下一首
function nextTrack() {
    playTrack((currentTrack + 1) % playlist.length);
}

// 上一首
function prevTrack() {
    playTrack((currentTrack - 1 + playlist.length) % playlist.length);
}

响应式音频可视化

结合Canvas可以实现音频可视化：

js实现播放

// 创建分析器节点
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);

// 获取频率数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);

    // 使用dataArray绘制可视化效果
    // ...
}

标签: js