点击图片播放音乐实现

在做网页设计期末作业时，为了给作业添加一些色彩，就在网上学习了一下，实现点击图片播放音乐或背景音乐的效果。在这里分享一下，一来可以给需要的同学们学习，二来记录一下自己的学习。

思路：1.在主页上放一个div，设置div的大小和位置
2.div要放在垂直Z轴上，使它在页面的最上方，用绝对定位或者固定定位固定在一个你喜欢的位置
3.div里应该有你要放的图片img，音乐audio
4.通过js代码触发事件播放或停止

图片:

html代码：

<div id="md"><span>点击图片播放</span></div><div id="mc"><audio id="music" src="../html_work/music/harrisonwheeler - Vacation.mp3 音乐路径" ></audio><img src="../html_work/images-1/imgg-1.gif 图片路径" width="80px" height="80px" title="点击播放音乐" onClick="play()"></div><script src="../html_work/js/music.js  音乐js路径"></script>

css代码：

#mc {z-index: 10px;position: absolute;/* position: fixed; */left: 40PX;top: 140px;width: 40px;height: 40px;border-radius: 50%;
}#md {position: absolute;/* position: fixed; */left: 40PX;top: 230px;width: 100px;height: 60px;
}#md span {color: rgb(15, 86, 240);
}#mc img {border-radius: 50%;
}

js代码：

window.onload = function() {var audio = document.getElementById('music');audio.pause(); //打开页面时不播放音乐，
}function play() {var audio = document.getElementById('music');if (audio.paused) {audio.play();} else {audio.pause();audio.currentTime = 0; //音乐从头播放}
}

本人为初学者，有什么不对的地方大家可以指出。

点击图片播放音乐实现相关推荐

HTML点击图片播放音乐
参考这篇,可以有图单曲循环: HTML点击图片播放音乐若是不要图片也就是把文章中的img去掉就行(注:图片和音乐都可以是自己的) pause:播放暂停 play:播放开始 source:html做判 ...
公众号排版|点击图片播放音乐你不会还不会吧
新的功能上线了! "点图播放音频"顾名思义,在公众号文章插入图片点击就能播放音乐,听起来是不是很炫酷其实很简单,需要用到微信公众号平台和速排小蚂蚁编辑器首先先登录微信公众号,在 ...
135编辑器html点击图片播放音乐,135微信编辑器怎样添加音乐 135编辑器添加音乐图文教程...
软件安装:装机软件必备包关于电脑装机必须的软件,比如windows office系列办公软件.网页浏览器.杀毒软件.安全防护软件.刻录软件.压缩软件.下载工具.多媒体播放软件.多媒体编辑软件.输入法 ...
135编辑器html点击图片播放音乐,怎么用135编辑器排版公众号怎么做点击切换图片...
最佳答案 135是一款方便实用的排版编辑器,可以进行图文等很多功能的编辑,也是很受欢迎的.下面就给大家介绍一下用135编辑器怎么排版. 操作方法 [01]首先我们在浏览器中搜索"135&qu ...
html 实现点击按钮播放音乐
在 HTML 中播放音乐需要使用 <audio> 标签.要让按钮点击时播放音乐,你可以使用 JavaScript 实现. 首先,在 HTML 中添加一个 <audio> 标签, ...
【Android】点击按钮播放音乐，再次点击停止播放
1.在res下新建raw文件夹将音频复制粘贴至文件夹 2.代码 (1)PlatformActivity.java public static int cnt = 0;SoundPool sp;//声 ...
c# 添加MouseEnter事件 /Directory类 /ListBox实现双击更换图片/播放音乐
1 c# 添加MouseEnter事件当鼠标进入按钮的可见部分的时候,给按钮一个新的坐标 private void btnUnLove_MouseEnter(object sender, Event ...
html点击图片播放swf多媒体文件
<embed src="source/nxdx宣传片.swf" quality="high" width="1000" height= ...
入门C语言第三话：数组之实战篇——扫雷（进阶版——图形化界面，递归展开，播放音乐与音效，标记取消雷，记录雷的个数，鼠标点击,文末附有完整代码）
文章目录前言每日鸡汤基本思路衔接基础班扫雷准备阶段正文一.雷盘信息的存储 1.设置雷盘11*11与初始化 2.放置雷 3.放置雷周围的信息二.图形化界面 1.创建与初始化窗口 2.加载 ...

点击图片播放音乐实现

点击图片播放音乐实现

点击图片播放音乐实现相关推荐

最新文章

热门文章