js随机切换背景音乐

简介: 1.通过触发onended事件调用函数改变音频的src(地址)来达到切歌 #onended DOM事件对象 var song = document.

1.通过触发onended事件调用函数改变音频的src(地址)来达到切歌

 <audio autoplay="autoplay" src="cfc.mp3" id="song" onended="change()"></audio> 
                                                      #onended DOM事件对象
 <script type="text/javascript">
    var song = document.getElementById('song');
    music =new Array('音乐存放的地址eg:media/xxx.mp3','xxxxxx','xxxx');
    function change() {
        if(song.ended){#判断音乐是否播放完
        index = Math.floor(Math.random()*music.length);
        #Math.floor()就近取整
        #Math.random() 0-1内的随机数 Math.random()*10代表0-10内的随机数
        song.src=music[index];
        song.play();
    }
 } 
</script>

2.通过设置监听事件

  <script type="text/javascript">
  var song = document.getElementById('song');
  music =new Array('media/cfc.mp3','media/fhm.mp3');
  song.addEventListener("onended" ,function(){
    if(song.ended){
    index = Math.floor(Math.random()*music.length);
    song.src=music[index];
    song.play();
  }
  });
  </script>

  照搬以上代码是运行不了的,把他放到window.onload=function(){   } 去,才能运行

  element.addEventListener(event, function, useCapture)
目录
相关文章
|
18天前
|
人工智能 自然语言处理 IDE
阿里云Qoder CN是什么?功能详解、Credits计费、CLI配置接入全教程
在选型和落地过程中,有几个关键判断标准与避坑要点。选型上,编程学习者、学生、低频编码人群选择免费社区版即可,永久免费、无月租,每月100 Credits足以支撑日常学习与小型项目迭代;高频个人开发者选择个人专业版或高级版;重度使用用户选择个人旗舰版;研发团队选择团队版;企业组织按数据合规与管控需求选择企业标准版或企业专属版。免费社区版存在功能权限边界:不支持多文件跨工程理解、全仓库批量重构、RepoWiki仓库知识库、Experts专家协作、Subagent多子代理等高阶工程能力,上下文窗口存在合理上限,适合学习、个人小项目,企业级大型工程需升级付费版本。避坑点包括:升级前务必确认旧版ling
331 1
|
2月前
|
人工智能 自然语言处理 API
阿里云百炼Token Plan最新AI模型订阅计划:个人版和企业版发布,最低39元1个月
阿里云百炼Token Plan是面向个人与企业用户的AI大模型订阅服务,按Credits计费,支持文本、图像、视频及第三方大模型(如Qwen、DeepSeek、Kimi等)。个人版39元/月起,企业版150元/席/月起,含不同档位Credits额度与Agent并发能力,可于阿里云CLUB中心领券优惠。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
264 1
|
Java 关系型数据库 MySQL
高校大学生社团管理系统的设计与实现(论文+源码)_kaic
高校大学生社团管理系统的设计与实现(论文+源码)_kaic
|
5月前
|
SQL Oracle 关系型数据库
MySQL迁移到国产数据库实战指南:以金仓为例
本文详解MySQL迁至国产金仓KingbaseES的实战经验:涵盖兼容性评估、官方工具(KDMS/KDTS/KFS)使用、高频语法差异(自增主键、字符串处理、日期函数、Upsert等)、数据迁移技巧及性能调优要点,助你少踩坑、高效落地。
839 1
|
6月前
|
人工智能 自然语言处理 IDE
Qoder——来自阿里的Agentic 智能体编程平台,Qoder-Teams-Credits费用300元/月,功能及使用场景全解析
Qoder是阿里云推出的Agentic智能体编程平台,支持自然语言交互、全栈开发与多语言智能问答。集成LLM,Qoder官网:https://t.aliyun.com/U/58ZleE 可理解上下文、自动生成代码/测试、解释逻辑,并提供IDE、CLI、JetBrains插件等多种接入方式,显著提升开发效率与代码质量。
3514 7
|
5月前
|
消息中间件 运维 数据可视化
云客服可以对接企业微信 / 抖音商城吗?全渠道 API 对接方案、架构落地与踩坑总结
抖音公域成交 + 企业微信私域沉淀已成为电商标准运营链路,但多渠道客服系统割裂带来操作低效、数据不通、运维复杂等问题。本文基于两大平台官方开放 API,梳理云客服对接企微、抖音商城两种集成方案,拆解分层技术架构、配置流程、线上高频故障,对比自研与 SaaS 化落地差异,结合通讯云落地案例给出选型校验标准,适合企业搭建统一全媒体客服中台参考,全文以技术复盘视角撰写,无商业营销导向。
513 0
|
7月前
|
人工智能 机器人 API
阿里云轻量应用服务器部署OpenClaw图文攻略|LINE集成+千问Qwen3.6-Plus配置及常见问题解答
2026年,开源AI智能体框架OpenClaw(曾用名Clawdbot,被称为“龙虾AI”)凭借轻量化、强执行、多平台接入的特性,成为个人与团队搭建专属AI助手的首选方案。它打破传统AI“只说不做”的局限,实现“理解指令→规划任务→自动执行→结果反馈”的全闭环,覆盖自动化办公、跨平台协作、消息处理等场景。阿里云轻量应用服务器以低门槛、高性价比、免运维的优势,完美适配OpenClaw 7×24小时稳定运行需求;集成LINE后,可实现全球主流社交平台的单聊/群聊AI交互,无缝触达海外用户;搭配阿里云千问Qwen3.6-Plus大模型,解锁超长上下文、深度推理与精准任务执行能力
561 5
|
10月前
|
JSON 监控 API
1688价格API:批发价实时比对,省钱利器!
本文介绍如何利用1688价格API实现实时批发价比对,帮助商家自动化获取最优进货价。涵盖API原理、Python代码示例及省钱策略,助力降低采购成本,提升竞争力。(239字)
8091 1
|
存储 关系型数据库 MySQL
【mysql】文本字符串类型
【mysql】文本字符串类型
5257 1
【mysql】文本字符串类型