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. 【Linux】Re02

    一.运行启动级别 0 关机 1 单用户 2 多用户状态没有网络服务 3 多用户状态存在网络服务 4 系统未使用保留给用户 5 图形界面 6 重启 命令: init [0 - 6] 图形化界面级别需要对 ...

  2. 英语表达中address和solve的区别

    "Address" 和 "solve" 都表示处理问题,但在具体用法和含义上有所不同: Address: 含义: 处理.应对.讨论或提及问题. 强调: 关注并开 ...

  3. AMiner的数据质量和完善问题

    最近参加到了一个国家科技项目中,这里就不吐槽这种高校承接国家科技项目是一件多么不靠谱的事情了,这里就说说我们的对标产品"AMiner".补充一下,虽然个人对AMiner的评价不是很 ...

  4. 除了Ubuntu以外的Linux系统可以安装Tensorflow/Pytorch的GPU版本吗？？？

    废话: 平时没事有用到的Linux系统有Centos/Redhat/Ubuntu/UOS/Deepin,其中Ubuntu系统主要是用来工作生产的,UOS就是看看国家队的进展如何,Deepin就是看看民 ...

  5. IntersectionObserver + scrollIntoView 实现电梯导航

    电梯导航也被称为锚点导航,当点击锚点元素时,页面内相应标记的元素滚动到视口.而且页面内元素滚动时相应锚点也会高亮.电梯导航一般把锚点放在左右两侧,类似电梯一样.常见的电梯导航效果如下,比如一些官方文档 ...

  6. DolphinScheduler分布式集群部署指南(小白版)

    官方文档地址:https://dolphinscheduler.apache.org/zh-cn/docs/3.1.9 DolphinScheduler简介 摘自官网:Apache DolphinSc ...

  7. Dijkstra单源最短路模板

    struct DIJ { using i64 = long long; using PII = pair<i64, i64>; vector<i64> dis; vector& ...

  8. VMware 安装 OpenWrt

    准备 OpenWrt VMDK 固件映像 你可以直接下载 VMDK 版本的 OpenWrt 固件映像,或者自己构建一个,或者从 IMG 映像文件转换.一般来说 IMG 映像文件较为容易获取,因此下面介 ...

  9. YAML 使用

    YAML 语言教程 | 阮一峰的网络日志 YAML Reference YAML Tutorial | Tutorials Point YAML (/ˈjæməl/) YAML Ain't Marku ...

  10. c++学习笔记（二）：引用

    c++中的引用 引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. C++ 引用 vs 指针 引用很容易与指针混淆,它 ...