HTML网页中的音乐播放代码

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML网页中的音乐播放代码相关的知识，希望对你有一定的参考价值。

当前目录下有1.MP3 2.MP3 3.MP3 4.MP3 5.MP3
做一个html网页,有播放器图形,默认从1.MP3开始循环播放
能上一曲下一曲等

据个人了解
网页中的音乐播放代码有以下几种：
第一种:页面代码中的<head></head>之间加入<bgsound src="音乐url" loop="-1"> 这段代码。 loop指音乐循环的次数，可设置为任意正整数，若设为“-1”的话，音乐将永远循环。

第二种：
在网页代码中的<style></style>标签之间加入一个“Embed”标签，其最简形式就像这样：
<embed src="音乐url" autostart="true" loop="true" width="80" height="20">
不同的是，在这里我们可以设置更多内容，相信内容请看w3scholl手册！
第三种：
使用超链接
例如：<a href="horse.mp3">Play the sound</a>
<script src="http://mediaplayer.yahoo.com/latest"></script>
第四种：
使用 HTML5 <audio> 元素
<audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
例子：
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio> 参考技术A

所用工具：notepad++

实现网页中播放音乐的用的是html语言中的embed标签。

代码如下：

<embed src="音频文件地址" autostart="true" loop="true" width="100" height="100"> </embed>

HTML中embed插入音频文件相关属性值介绍：

width：宽度
height：高度

autostart：是否自动播放
loop：是否循环
src：文件路径

 参考技术B http://zhidao.baidu.com/question/6391569.html?fr=qrl&fr2=query
上面这个网页说的是如何加入多个音乐

下面这个代码只能自动循环播放一首音乐
<embed src="1.mp3" autostart="true" loop="true" width="200" height="200"></embed>本回答被提问者采纳 参考技术C HTML这个我知到里面可以加音乐播放代码，
解决方案：src=" 3" autostart="true" loop="true" width="200" height="200"></embed> 参考技术D

 HTML播放音乐教材

HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

技术图片

前言

没有使用任何框架，只是想用最简单纯js的代码实现下

写在前头的话

鄙人野生前端一只，gis专业，自学前端已经一年多了，为什么要写个音乐播放器呢？原因有两个：

  1. 本人是网易云音乐的重度用户，近乎疯狂
  2. 自学了前端这么久了，也是想检验下自己的成果吧

本播放器要干什么呢

  1. 简单的 播放 暂停 那当然不能少
  2. 切换歌曲，上一首 、 下一首 也得有
  3. 进度条 ，这个有点复杂，本来想用 input[range] 写，但是样式不好改，自己用多个div代替吧
  4. 进度条都有了，音量调节 不能少吧，毕竟他俩UI样式差不多，照猫画虎呗
  5. 再加一个 静音功能 ，省的音乐太大声，邻居找茬哦(⊙o⊙)

本播放器还能干什么呢

  1. 歌词滚动 有木有
  2. 搜索单曲
  3. 指定歌单播放 这个需要知道歌单的 id 不是很好找，（得上网易云音乐官网登录自己的账号，找到歌单，点进去，抬头看URL 里最后的 id 参数）暂时用的是“我喜欢的音乐”（歌单）的id

技术图片

那闲话不多说，开整吧（原谅一个理科生的表达能力）

我模仿的是网易云音乐的PC端，所用到的技术都是前端的基本技术 HTML、CSS、JAVASCRIPT
由于我是自学的，没有那么多规矩，我这个人看到是我感兴趣的，我立马就会去做，这个播放器也不例外。

首先先的将它“画”出来（HTML+CSS）

我仔细看了下网易云音乐PC端的布局，大致分为四部分，四个模块

  1. 顶部菜单（顶部导航，叫什么名无所谓了）
  2. 底部播放条 这是播放器的核心
  3. 主体内容在右边 歌单的详细信息和歌曲列表
  4. 左侧是导航和歌单组
  5. 左下角还有一个小窗，显示正在播放歌曲的简要信息，点击小窗 展开一个歌曲详情页

无图不真相
技术图片
技术图片

然后呢，写页面逻辑JavaScript

播放器

  1. 播放器的控制按钮

播放(暂停)按钮，这个可以通过 play() 和 pause()方法实现

  1. 进度条

这个通过监听timeupdate事件，实施更新当前播放位置，
通过监听鼠标移动事件，改变进度条的长度

  1. 静音按钮，可以通过audio.muted=true实现

初始化歌单列表

网易云音乐获取歌单的API
http://music.163.com/api/play...[id]

id 歌单id

因为涉及到跨域问题。暂时我前台这边又没有办法跨域，所以参考了网上的代码，写个PHP做代理 （2018-09-14更新：现在代码已改为Nodejs做代理服务），这样就不存在跨域问题了。
获取到歌单数据后，重新渲染下DOM

搜索歌曲

网易云音乐获取歌曲的API
http://s.music.163.com/search...[songname]&type=1&limit=10

s           搜索内容
type        搜索类型
limit       搜索返回结果数

歌曲详情页

主要是歌词和歌词滚动

网易云音乐获取歌词API
http://music.163.com/api/song...[id]

id 歌曲id

歌词滚动，先把获取到的歌词数据分割成时间点和歌词两部分，将这两部分存入dataset中，
通过监听timeupdate事件，判断和当前播放时间相近的歌词，记录它的getBoundingClient()的top值，将滚动条设置到指定位置 例如：ele.srcollTop=100;

先写到这里吧

总结能力太差了，原谅理科生的无奈

附录

完整源码，点击查看
后台代码，点击查看

此文源自我的博客

大佬，给个start呗^_^

以上是关于HTML网页中的音乐播放代码的主要内容，如果未能解决你的问题，请参考以下文章

HTML怎么添加背景音乐模块，进入网页自动播放的？

网页中怎么写自动播放mp3音乐的代码

jq 自动播放音乐代码

最简单的向HTML网页添加背景音乐的方法

怎么在HTML插入音乐自动播放的代码

如何用HTML写代码实现自动播放音乐