js实现播放

实现音频播放

使用HTML5的<audio>元素可以快速实现音频播放功能。以下是一个简单的实现示例：

<audio id="myAudio" src="audio-file.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>

使用JavaScript控制播放

通过JavaScript可以更灵活地控制音频播放：

const audio = new Audio('audio-file.mp3');
audio.play();

// 监听播放结束事件
audio.addEventListener('ended', () => {
    console.log('播放结束');
});

实现视频播放

对于视频播放，可以使用<video>元素：

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<button onclick="document.getElementById('myVideo').play()">播放</button>

检查浏览器支持

在播放前最好检查浏览器是否支持相关格式：

const audio = new Audio();
if (audio.canPlayType('audio/mp3')) {
    audio.src = 'audio-file.mp3';
    audio.play();
} else {
    console.log('浏览器不支持MP3格式');
}

处理自动播放限制

现代浏览器通常阻止自动播放，需要用户交互后才能播放：

document.body.addEventListener('click', () => {
    const audio = new Audio('audio-file.mp3');
    audio.play();
}, { once: true });

实现播放列表

创建一个简单的播放列表功能：

const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentTrack = 0;
const audio = new Audio();

function playTrack(index) {
    audio.src = playlist[index];
    audio.play();
}

audio.addEventListener('ended', () => {
    currentTrack = (currentTrack + 1) % playlist.length;
    playTrack(currentTrack);
});

playTrack(0);

添加播放控制UI

创建一个完整的播放器界面：

<div id="player">
    <button id="playBtn">播放</button>
    <button id="pauseBtn">暂停</button>
    <button id="nextBtn">下一首</button>
    <span id="trackInfo"></span>
</div>

<script>
    const playlist = [
        { title: '歌曲1', src: 'song1.mp3' },
        { title: '歌曲2', src: 'song2.mp3' }
    ];
    let currentTrack = 0;
    const audio = new Audio();
    const trackInfo = document.getElementById('trackInfo');

    function updateTrackInfo() {
        trackInfo.textContent = playlist[currentTrack].title;
    }

    document.getElementById('playBtn').addEventListener('click', () => {
        audio.src = playlist[currentTrack].src;
        audio.play();
        updateTrackInfo();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
        currentTrack = (currentTrack + 1) % playlist.length;
        audio.src = playlist[currentTrack].src;
        audio.play();
        updateTrackInfo();
    });
</script>

处理错误情况

添加错误处理以增强用户体验：

audio.addEventListener('error', () => {
    console.error('播放错误:', audio.error);
    alert('播放失败，请重试');
});