js实现控制音乐播放

用js实现控制音乐播放其实很简单，但是第一次去做可能会遇到一点点小问题。

比如说我自己，第一次想实现一个播放器效果，然后在网上搜寻半天照着自己的理解写下如下代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             var mp3 = document.getElementById("music");
             function start() {
                 mp3.play();
             }
 ​
             function stop() {
                 mp3.pause();
             }
         </script>
     </head>
     <body>
         <video id="music" controls="controls" src="刚好遇见你.mp3">
 ​
         </video>
         <input type="button" id="" value="开始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

我自己感觉是没有任何问题的，然而事情总是超乎我的意料之外，却又在情理之中。可能是因为js学的太浅了，对js的认知度太低，可以说几乎不懂吧。

这时候Ctrl+S保存，然后Ctrl+R打开浏览器一运行，欸嘿，没反应！然后又打开控制台，看到几行红色，说是什么什么是错误。如图：

咱也看不懂，于是乎就复制到浏览器去搜一下。

搜到的结果也是五花八门，并没有我需要的。

然后又自己思考一番。

先在方法外用console.log(mp3);输出这个变量。

再次打开浏览器按下F12显示null，感觉应该也没问题，毕竟是mp3音频文件。

然后又在方法内用console.log(mp3);输出这个变量，结果在浏览器控制台里面什么也没有显示，这时候就是问题所在了。

可能是变量范围的问题吧！咱也不懂！

于是乎又打开浏览器搜索一番，似懂非懂，大致意思就是说：方法内获取不到方法外的变量，方法内需要调用的变量最好就在方法内写。

但是我印象里好像又有全局变量这种东西，害，咱也不懂！当个规律记下吧！

最后实现效果的代码如下：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             function start() {
                 var mp3 = document.getElementById("music");
                 mp3.play();
                 console.log(mp3);//null
             }
             function stop() {
                 var mp3 = document.getElementById("music");
                 mp3.pause();
                 console.log(mp3);//null
             }
         </script>
     </head>
 ​
     <body>
         <video id="music" controls="controls" src="刚好遇见你.mp3">
 ​
         </video>
         <input type="button" id="" value="开始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

js实现控制音乐播放的更多相关文章

  1. Android中通过耳机按键控制音乐播放的实现

    今天在研究Android中实现Android 4.2.2源码中的Music应用的源码,关于通过耳机按键控制音乐播放的实现,有点好奇,就仔细分析了一下源码, 主要由 MediaButtonIntentR ...

  2. [MAUI 项目实战] 手势控制音乐播放器（一）： 概述与架构

    这是一篇系列博文.请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAU ...

  3. [MAUI 项目实战] 手势控制音乐播放器（四）：圆形进度条

    @ 目录 关于图形绘制 创建自定义控件 使用控件 创建专辑封面 项目地址 我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条.专辑页面和播放按钮. 关于图形绘制 使用MAUI的绘制功能,需要Mi ...

  4. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  5. [MAUI 项目实战] 手势控制音乐播放器（二）： 手势交互

    @ 目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 原理 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个 ...

  6. [MAUI 项目实战] 手势控制音乐播放器（三）： 动画

    @ 目录 吸附动画 确定位置 平移动画 回弹动画 使用自定义缓动函数 多重动画 点击动画 项目地址 上一章节我们创建了手势容器控件PanContainer,它对拖拽物进行包装并响应了平移手势和点击手势 ...

  7. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  8. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  9. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  10. 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件

    图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...

随机推荐

  1. 大语言模型（LLM）运行报错：module ‘streamlit‘ has no attribute ‘chat_message‘

    参考: https://blog.csdn.net/weixin_45748921/article/details/134645308 问题在于版本不匹配,深究一下为什么各个版本软件不匹配,发现原因是 ...

  2. 【转载】 一块GPU顶数千个CPU内核，英伟达的这个强化学习利器技术细节终于公开了

    原文地址: https://mp.weixin.qq.com/s/FmFqmIqmknkpBQbNb2ioDA ============================================ ...

  3. Java静态相关问题

    问题1: public class Demo01_StaticTest { private static Demo01_StaticTest st = new Demo01_StaticTest(); ...

  4. Maven经验分享（五）Maven拷贝资源

    上一章介绍使用ant拷贝资源,这里介绍maven拷贝资源,使用maven-resources-plugin插件. <plugin> <groupId>org.apache.ma ...

  5. CF Div3 962 E-F

    CF Div3 962 E-F E. Decode 链接: Problem - E - Codeforces 简要题意: 给你一个长度为 \(n\) 的二进制字符串\(s\) .对于每一对整数\((l ...

  6. zabbix 自定义用户key与参数userparameters监控监本输出

    zabbix在模板中预定义了一些key,但通常情况,并不能满足我们的需求.幸运的是zabbix提供了自定义key的方法,因此我们可以灵活的监控各种我们想要监控的数据. 定义key有两种修改方式: vi ...

  7. 甲方扔给两个存在包名与类名均相同的Jar包，要在工程中同时使用怎么办？

    你的项目是否曾遇到过有jar包冲突,而这些冲突的jar包又必须同时存在的情况?一般来说,jar 冲突都是因不同的上层依赖项,自身又依赖了相同 jar 包的不同版本所致,解决办法也都是去除其中一个即可. ...

  8. SpringBoot多环境日志配置

    SpringBoot多环境日志配置 SpringBoot 默认使用 LogBack 日志系统 默认情况下,SpringBoot项目的日志只会在控制台输入. 如果想查询历史日志则无法找到,我们需要一个日 ...

  9. Windows 新建用户帐户

    Windows 近年来大力推广使用 Microsoft 帐户登录 Windows.然而,如果你这么做了,Windows 会取你登录帐户的前 5 个字母作为你的本地用户名,非常的丑陋.更难受的是本地用户 ...

  10. 关于arcmap使用json文件转要素类

    手工编辑了一个json文件,或者在arcgis server下拉取到的json格式文件,通过arcmap进行转换时,出现异常,错误代码001558,此时就是json文件格式不是ansi导致的,用文本编 ...