用鼠标与指尖
让互联网更加有趣

html5 audio 网页随机播放音乐

html5 audio 网页随机播放音乐-小伟博客

html5 audio 网页随机播放音乐

让网页多首歌曲随机播放,用到html5的audio标签,属性值可自定义,歌曲数量可自行添加多首音乐。

工具/原料

  • 代码编辑器
  • 名流云外链客户端
  • 音乐外链

方法/步骤

  1. 1

    首先用代码编辑器(自荐Notepad++,下载地址:http://www.mlwei.com/448.html)打开你要添加随机音乐的网页源码html文件。

  2. 2

    按CTRL+F,输入</body>回车,把第三步自行修改好的代码添加到</body>前面,注意是前面,</body>前面,重要的事情说三遍。

  3. 3

    这是最重要的一步了,先复制以下所有代码到</body>前面,修改方法请看四步:

    <script type="text/javascript">
    //<!CDATA[
    var bodyBgs = [];
    bodyBgs[0] = "音乐直连地址1";
    bodyBgs[1] = "音乐直连地址2";
    bodyBgs[2] = "音乐直连地址3";
    bodyBgs[3] = "音乐直连地址4";
    bodyBgs[4] = "音乐直连地址5";
    bodyBgs[5] = "音乐直连地址6";
    var randomBgIndex = Math.round( Math.random() * 5 ); document.write('<audio src=\''+bodyBgs[randomBgIndex]+ '\'autoplay=\'autoplay\'></audio>');
    //]]>
    </script>

  4. 4

    bodyBgs[0] = “音乐直连地址1”; [0] 的0是地址索引,音乐直连地址换成自己的音乐外链,推荐免费的音乐外链上传www.yunlink.top

    你要添加多少首随机音乐,就写多少  bodyBgs[索引] = “地址”;  这样的代码

    注意,索引从0开始,每增加一首,索引+1,懂了吧。

    同时这段代码的索引总数也要改:

    var randomBgIndex = Math.round( Math.random() * 5 );

    后面那个5就是最大索引,改成你最后地址的索引,你看第三步我怎么写的,自行对比。

  5. 5

    然后把修改好的代码全部复制到html网页文件的</body>前面,有不懂的联系QQ523077333注明来源,外链上传:www.yunlink.top 前端开发学习www.mlwei.com

    END

注意事项

  • 请用正规的代码编辑器编辑,勿用记事本。以免造成编码问题
  • 注意代码中的符号,空格,英文引号,字符等
  • 音乐链接必须是绝对直连,必须全英文,否则无法调用
支付宝扫码打赏 微信扫码打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

未经允许不得转载:小伟博客 » html5 audio 网页随机播放音乐

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小伟博客 · 给你感兴趣的内容

联系我们官方交流群