HTML5选择音频自动播放样式

最新推荐文章于 2023-11-06 17:49:03 发布
最新推荐文章于 2023-11-06 17:49:03 发布
阅读量198 收藏
点赞数
原文链接：http://www.cnblogs.com/kulowreidyql/p/5736800.html
版权

昨天编写了HTML5的音频播放样式，今天编写一个特别简单的音频播放样式，选择文件后自动播放：

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择音频自动播放</title>
</head>
<body>
<audio controls autoplay loop>
<source src="music/莫斯科没有眼泪（钢琴曲）.mp3" type="audio/mp3">
</audio>
<p>
<select οnclick="getinfo()" name="sel" id="sel" size="8" style="width: 300px;">
<option>莫斯科没有眼泪（钢琴曲）.mp3</option>
<option>陆展博最后表白插曲.mp3</option>
<option>平凡之路(纯音乐).mp3</option>
<option>霞光(伴奏).mp3</option>
<option>治礼亚.mp3</option>
<option>霞光.mp3</option>
</select>
</p>
<script>
function getinfo(){
document.getElementsByTagName("audio")[0].getElementsByTagName("source")[0].src = "music/"+document.getElementById("sel").value;
document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();
}
</script>
</body>
</html>

 

完成后市是这个样子的：

 

可以选择文件后自动进行播放！

就这样了，明天继续！

转载于:https://www.cnblogs.com/kulowreidyql/p/5736800.html

weixin_30699831
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 SVG音乐播放器特效
06-24
HTML5 SVG音乐播放器特效是一款在线mp3音乐播放器样式代码，带进度条跟播放按钮。
js实现音乐播放控制条
01-19
前言 html5中提供audio标签, 该标签实现音频的播放，之前就一直对于音频以及视频播放比较感兴趣，一直想要自己实现一个音频和视频播放的模块，这也是本文章撰写的初衷，最近花了些时间实现了Audio播放控制条，从这个小的模块实现也学习到了以前没有接触到的知识。 Audio实现思路 浏览器原生提供的audio的样式比较简单而且不是太好看，原生提供的样式如下： 自实现的音乐播放控制条, 效果如下： 该音乐播放控制条实现的功能如下： 音乐播放（最基本的） 多首音乐的手动切换以及自动切换实现循环播放 进度条点击播放进度的改变 进度条拖动播放进度的改变 音量点击改变 音量拖
有关HTML5中背景音乐的自动播放功能
09-27
主要介绍了有关HTML5中背景音乐的自动播放功能的相关资料,需要的朋友可以参考下
shikwasa:为播客而生的音频播放器
04-30
关于 Shikwasa是为播客而生的网络音频播放器。 如果您厌倦了使用音乐播放器替代播放播客，那么您来对地方了。 说不球员甚至不支持播客共同的特点！ :rocket: 超轻量 :hatching_chick: 无依赖 :clapper_board: 播客章节 :racing_car: 播放速度控制 :video_game: 向前/向后跳过 :glasses: 辅助功能意识 :crescent_moon: 暗模式 :radio: 音频流支持 :laptop: 兼容SSR 将访问者直接定向到订阅页面 播放清单 :open_book: 目录 选项 声音的 容器 固定的 themeColor 主题 自动播放 静音 预载 speedOptions 下载 大事记 风格 章节插件 路线图 这个项目的怪异名字怎么办？ 执照 安装 npm install shikwasa 也可以在CDN上找到： https ： //www.jsdelivr.com/package/npm/shikwasa 用法 包括样式表和脚本 < head > < link re
html，css，js实现前端歌曲播放
09-15
h5播放器
前端实现页面自动播放音频方法
唐唐唐行的博客
06-26 3538
尽管自动播放媒体文件是一个很实用的功能，但是我们也应该谨慎地使用它，保证只有在它被需要的时候才使用。在这篇文章中，我们将介绍各种媒体和。，而是使用play函数进行播放，play函数执行时会返回一个promise，可以根据promise来判断当前的播放是成功了还是失败了，并且在失败后做出相应的提示。由此，Chrome计算出的媒体参与度得分在定期播放媒体的网站上足够高时，允许在桌面上自动播放媒体播放。的自动播放功能，包括关于如何使用自动播放功能、如何优雅的处理阻止自动播放功能的一些简短的介绍。
浏览器自动播放音视频-前端实现方案
Ghmin的博客
11-06 3790
在开发中可能有遇到这样的需求，当用户打开页面后，需要自动播放视频或音频，按理说那就打开页面时play()一下不就搞定了吗，但实际情况很明显不是，不然也没得这篇文章喽，要实现这个需求，我们得先了解一下浏览器自动播放策略。再给出相应解决方案。
前端html多音频自动连续播放
hxxxxx111的博客
02-08 1655
前端html多音频连续自动播放，且标识正在播放的文件
怎么让HTML5 中视频和音频自动播放而不静音
Re_The_W的博客
04-03 1万+
video和audio无法自动播放的问题 很多前辈说加上muted (静音)就可以自动播放 muted 加入之后确实会自动播放，但放视频和音乐没声音太坑了！ 解决方法：权限问题！！！ 从设置中开通浏览器的音频权限，点击允许就OK了。 如果单个网址打不开权限，那就直接设置允许全部的网址自动播放音频。 这可能就是为什么muted能让实现autoplay的原因。 ...
html5-audio标签不能自动播放的坑！！！
L_junpeng的博客
04-19 3万+
应用是运行在公众号上的，一直在google浏览器调试，做播放audio时一开始出现了一个报错 Uncaught (in promise) DOMException 百度搜了下是google浏览器的问题，就一时不着急没处理他，后面这个问题提上了日程，真是整整浪费了一天时间来改这个问题！！！ 先简单说下一些我收集整理到的一些原因和处理方式，我也用过部分（如下） 部分浏览器、微信浏览器、ios...
Html5 audio标签样式的修改
11-21
先给大家介绍下HTML5中的新元素标签 src：音频文件路径。 autobuffer：设置是否在页面加载时自动缓冲音频。 autoplay：设置音频是否自动播放。 loop：设置音频是否要循环播放。 controls：属性供添加播放、暂停和音量控件。 由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，所以我简单的把它进行了封装，效果如下: 作为技术实现，它的原理比较简单，就是把原生的audio隐藏，然后用div来显示播放器的效果，然后调用它的click事件来触发play和stop,
HTML5视频自动播放拦截器「HTML5 Video Autoplay Blocker」-crx插件
03-15
阻止自动播放HTML5 <video>标签。 禁用所有HTML5音频和视频的自动播放，此扩展当前未被维护； 请参阅GitHub以获取最新消息：https://github.com/Eloston/disable-html5-autoplay/blob/master/README.md ================== ===禁用HTML5自动播放将禁用HTML5音频和视频自动播放。 除了从媒体元素中删除HTML自动播放属性之外，“禁用HTML5自动播放”还与媒体JavaScript API挂钩。 这允许对媒体控制和预期行为的模拟进行限制，以确保所有页面均正常运行。 转至Wiki以获取文档，支持信息以及更多信息：https://github.com/Eloston/disable-html5-autoplay/wiki链接：GitHub页面：https://github.com/Eloston/disable-html5-自动播放变更日志：https://github.com/Eloston/disable-html5-autoplay/releases问题跟踪器：https://github.com/Eloston/disable-html5-autoplay/issues从1.2版开始，我们重写了所有代码并解决了大多数主要问题，如果有任何新的错误/问题，请给我们反馈。 享受 ：） 支持语言:English
h5实现音乐播放器
03-20
完全用HTML5实现的音乐播放器，i like it ，特别是里面的歌。
60多套HTML5移动模板-haiyong.zip
最新发布
05-21
HTML5和CSS3：该模板使用了HTML5和CSS3技术，支持更多的多媒体元素，如音频、视频等。同时，CSS3的动画效果和过渡效果也为网页增色不少，提升了用户的视觉体验。 JavaScript和jQuery：为了实现更丰富的交互效果，ML...
javascript实现网页背景音乐自动播放
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-31 3634
javascript实现网页背景音乐自动播放
html - html5 audio 音乐自动播放，循环播放等9款播放器
热门推荐
Beluga_白鲸
02-01 6万+
说明随着HTML5越来越流行，越来越规范，音频播放支持和兼容改的平台越来越多，这里找到HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法，下面这9款 HTML5 音频播放器都是基于 audio 元素开发的，能够帮助你在网页中轻松的嵌入音频。列表　　jPlayer　　jPlayer 一款基于 jQuery 的免费开源的 HTML5 音频和视频播放插件，API 简单，支持自定义...
前端播放录音
bao9701的博客
09-02 847
播放录音
html5y音频自动播放,HTML5之音频audio知识（部分vedio）
weixin_42261068的博客
05-30 345
HTML总结(二)【HTML5之音频】HTML5重点知识之音频audio标签兼容性：InternetExplorer9+,Firefox,Opera,Chrome以及Safari支持标签。注释：InternetExplorer8以及更早的版本不支持标签。audio的常用属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放cont...
html5如何插入可自动播放的音频（图文）
lin123_00的博客
05-21 1万+
经常浏览网站或者经常进行页面布局的人，应该对页面中的音频，视频不陌生吧，正在学习HTML5的小伙伴，你知道HTML5中怎么插入音频并自动播放吗？这篇文章就和大家一起研究html5中的音频标签以及HTML5插入音频的代码，有一定的参考价值，可以参考一下。 需要面试题点击下面链接查看，有很多： 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） HTML5中的<audio>标签可以插入音频，control属性可以控制音频的播放，暂停，调节音量等。布局时可
css音乐播放器自动播放
06-12
在CSS中，无法直接实现自动播放音乐的功能...可以使用HTML5的`<audio>`标签来加载音乐文件，然后通过JavaScript来控制音频的播放和暂停。 以下是一个简单的示例代码，实现了页面加载后自动播放音乐的功能： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值