随机播放列表 - Javascript

在这个由Javascript编写的随机播放列表中，我们可以创建一个包含音乐或视频的数组，并通过Math.random()方法来随机选择一首歌曲或一部电影来播放。这样，我们可以创建无限的随机播放列表，让用户享受更多的乐趣和娱乐体验。

实现步骤

我们将会用到以下Javascript方法：

• Math.random() - 生成0到1之间的随机数字
• Math.floor() - 对数字进行向下取整
• document.createElement() - 创建一个新的元素
• document.getElementById() - 通过ID获取一个元素
• element.appendChild() - 将一个元素添加到DOM中

下面是实现随机播放列表的步骤：

步骤1 - 创建一个包含音乐或视频的数组

var playlist = [
    {
        title: 'Song Name 1',
        artist: 'Artist 1',
        audio: 'song1.mp3',
        image: 'song1.jpg'
    },
    {
        title: 'Song Name 2',
        artist: 'Artist 2',
        audio: 'song2.mp3',
        image: 'song2.jpg'
    },
    {
        title: 'Song Name 3',
        artist: 'Artist 3',
        audio: 'song3.mp3',
        image: 'song3.jpg'
    }
];

步骤2 - 生成随机数字

var randomIndex = Math.floor(Math.random() * playlist.length);

步骤3 - 创建播放器元素

var player = document.createElement('audio');
player.setAttribute('src', playlist[randomIndex].audio);

var image = document.createElement('img');
image.setAttribute('src', playlist[randomIndex].image);

var title = document.createElement('h3');
title.innerHTML = playlist[randomIndex].title;

var artist = document.createElement('h4');
artist.innerHTML = playlist[randomIndex].artist;

步骤4 - 将播放器元素添加到DOM中

var container = document.getElementById('player-container');
container.appendChild(player);
container.appendChild(image);
container.appendChild(title);
container.appendChild(artist);

完整代码

var playlist = [
    {
        title: 'Song Name 1',
        artist: 'Artist 1',
        audio: 'song1.mp3',
        image: 'song1.jpg'
    },
    {
        title: 'Song Name 2',
        artist: 'Artist 2',
        audio: 'song2.mp3',
        image: 'song2.jpg'
    },
    {
        title: 'Song Name 3',
        artist: 'Artist 3',
        audio: 'song3.mp3',
        image: 'song3.jpg'
    }
];

var randomIndex = Math.floor(Math.random() * playlist.length);

var player = document.createElement('audio');
player.setAttribute('src', playlist[randomIndex].audio);

var image = document.createElement('img');
image.setAttribute('src', playlist[randomIndex].image);

var title = document.createElement('h3');
title.innerHTML = playlist[randomIndex].title;

var artist = document.createElement('h4');
artist.innerHTML = playlist[randomIndex].artist;

var container = document.getElementById('player-container');
container.appendChild(player);
container.appendChild(image);
container.appendChild(title);
container.appendChild(artist);

结论

这是一个简单而强大的随机播放列表程序，可以让用户在音乐和视频中享受更多的娱乐。可以将其定位到H5应用程序中，增加趣味性。