javascript - html5 音频无法与 Angular 一起正常工作 ionic 型-6ren

javascript - html5 音频无法与 Angular 一起正常工作 ionic 型

转载作者：行者123 更新时间：2023-11-27 22:39:40

24

4

问题:AngularJS 同时播放同一首歌曲两次，中间有几秒钟的延迟，第一次我调用音乐时，我是这样做的:

 //preset sound
  var sound = true;
  var sound = localStorage.sound;
  var sound = eval(sound);

  $scope.icon = "ion-volume-mute";
  var audio = new Audio('sound/song.mp3');
  audio.loop = true;

      //change icon & sound based on localstorage variables
      if (sound == true){
          window.localStorage.setItem("sound", true);
          audio.play();
          $scope.icon = "ion-volume-mute";
          console.log(sound);
        }
        else{
          window.localStorage.setItem("sound", false);
          console.log("ëlse " + sound);
          audio.pause();
          $scope.icon = "ion-volume-high";
        }
  //let the user toggle the sound ( MUTE | Play)
  $scope.soundControl = function() {

    if (sound == false){
      sound = true;
      audio.play();
      $scope.icon = "ion-volume-mute";
      window.localStorage.setItem("sound", true);
      console.log(localStorage.sound);
    }
    else{
      sound = false;
      audio.pause();
      $scope.icon = "ion-volume-high";
      window.localStorage.setItem("sound", false);
      console.log(localStorage.sound);
    }
  }

这还为用户设置了一个按钮，其中显示静音或播放图标(也存储在本地存储中以供下次使用)

在另一个页面上，我想给用户另一个选择来继续使用音乐或停止它(在整个页面中继续播放)。

我使用相同类型的代码

  //sound
  var sound = true;
  var sound = localStorage.sound;
  var sound = eval(sound);

  $scope.icon = "ion-volume-mute";
  var audio = new Audio('sound/song.mp3');
  audio.loop = true;

      //audio switch ( PLAY | PAUZE)
  $scope.soundControl = function() {

    if (sound == false){
      sound = true;
      audio.play();
      $scope.icon = "ion-volume-mute";
      window.localStorage.setItem("sound", true);
      console.log(localStorage.sound);
    }
    else{
      sound = false;
      audio.pause();
      $scope.icon = "ion-volume-high";
      window.localStorage.setItem("sound", false);
      console.log(localStorage.sound);
    }
  }

奇怪的是，现在当您切换按钮时，音乐会开始播放两次，中间有一些延迟，而不是静音。

我尝试删除新的音频部分，但随后页面崩溃，因为找不到音频文件。

理想情况下，它会停止或开始播放现有的音乐文件。 (这是跨 2 个不同的 Controller )

最佳答案

通过使用我视野周围的 Controller ，我可以将我的东西放入 1 个 Controller 中，这看起来就像一个魅力

<body ng-app="starter">
    <div ng-controller="complete-app">
        <ion-nav-view></ion-nav-view>
    </div>
  </body>

使用这样的 Controller

app.controller("complete-app", function($scope) {
  $scope.icon = "ion-volume-mute";
  var audio = new Audio('sound/song.mp3');
  audio.loop = true;

  if (localStorage.sound === null)
  {
    var sound = true;
  }
  else {
    var sound = localStorage.sound;
    var sound = eval(sound);
  }

  //change icon & sound based on localstorage variables
  if (sound === true){
      window.localStorage.setItem("sound", true);
      console.log("sound " + sound);
      audio.play();
      $scope.icon = "ion-volume-mute";
      console.log(sound);
    }
    else{
      window.localStorage.setItem("sound", false);
      console.log("sound " + sound);
      audio.pause();
      $scope.icon = "ion-volume-high";
    }

  //let the user toggle the sound ( MUTE | Play)
  $scope.soundControl = function() {

    if (sound === false){
      sound = true;
      audio.play();
      $scope.icon = "ion-volume-mute";
      window.localStorage.setItem("sound", true);
      console.log(localStorage.sound);
    }
    else{
      sound = false;
      audio.pause();
      $scope.icon = "ion-volume-high";
      window.localStorage.setItem("sound", false);
      console.log(localStorage.sound);
    }
  }
});

关于javascript - html5 音频无法与 Angular 一起正常工作 ionic 型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38852859/

24

4

0

文章推荐： html - 如何对齐 HTML5 中的表格单元格？

文章推荐： JQuery:IE 样式错误/Select attr() 更改时的错误

文章推荐： javascript - document.execCommand ..SaveAs 隐藏元素问题。，

文章推荐： css - Cocoa WebKit - 检测 CSS 翻转/悬停

javascript - 对焦或模糊时的射击功能(一起)
我想要的是能够在输入获得焦点或失去焦点时执行某些操作(两个事件)。我尝试了以下方法，但这按事件单独工作(单独编码时):仅在焦点上，或仅在失去焦点时。另外，我希望它尽可能跨平台(包括触摸设备)，这是
JavaFX TableView 使用分页过滤(一起)
我分别研究了TableView的Filtering和Pagination。过滤: this帖子帮助我满足了我的需要分页: this , this帖子也帮助了我我想像这样将它们组合在一起: 详情-
TDD 和 UML 一起
我是 TDD 方法的新手，所以我想知道是否有人经历过这种机智可以启发我一点。我想获得一些关于如何一起使用 UML 和 TDD 方法的线索。我已经习惯了:用 UML 设计 --> 生成骨架类(然后保持
Docker 入口点和 cmd 一起
我尝试使用入口点和 cmd 设置 Docker。 FROM debian:stretch RUN apt-get update && \ apt install gnupg ca-certificat
Java 泛型与类和接口(interface) - 一起
我想要一个 Class 对象，但我想强制它所代表的任何类扩展类 A 并实现接口(interface) B。我能做到: Class 或者: Class 但我不能两者兼得。有办法做到这一点吗？最佳答案
javascript - WebStorm + RubyMine 一起(？)
我是 Rubymine 的长期用户。 Rubymine 非常适合基于 html 的 Rails 应用程序，但我现在正在做更多的 SPA 客户端工作(例如 javascript/react)。我发现我真
jquery - Prototype 和 jQuery 一起？
我注意到我使用的某个脚本依赖于原型(prototype)。 (Lightbox 2) 它会与 jQuery 在同一页面上一起工作吗？有没有办法确保它们不冲突？最佳答案可以，但你需要采取 speci
Jquery dataTables 和 tablesorter 一起
我需要对表中显示的数据进行分页并通过 ajax 调用获取它 - 这是我通过使用具有以下配置的 dataTables 插件来完成的 - bServerSide : true; sAjaxSource :
c - 归档和 gtk 一起 - 可能吗？
我是 gtk 新手，所以想知道在 C 语言中归档和 gtk 是否可以一起使用？例如，我可以从 .txt 文件中读取，然后在相同的代码中使用 gtk 在标签或其他内容中显示它吗？如果是，怎么办？谢谢!
java - Bck2Brwsr 与 JavaFX 一起？
有没有人设法得到Bck2Brwsr最近与 Java 8/JavaFX 8 一起工作？有没有兼容的机会？我找不到太多关于它的信息，也没有一个好的起点。使用给定的 Maven archetype我遇到了几
python - openid 和 oauth 一起？
在我的应用程序中，用户通过 openid(与 stackoverflow 相同)登录/注销。我想通过 oauth 向第三方应用程序开放我的应用程序。如何创建我的 openid-consumer 应
java - 与 Spring 一起 hibernate
我在启动和运行 Hibernate 和 Spring 时遇到一些问题。我有一个网络服务器项目，它使用了其他几个具有持久实体的项目。我遇到的问题是，对于存储在 WEB-INF/libs 内的另一个 ja
java - @ControllerAdvice 异常处理与@ResponseStatus 一起
我有 @ControllerAdvice 类，它处理一组异常。我们还有一些其他异常，这些异常用 @ResponseStatus 注释进行注释。为了结合这两种方法，我们使用博客文章中描述的技术:http
android - Progressbar 与 asyncTask 一起
我想在屏幕上使用进度条而不是 progressDialog。我在我的 XML View 文件中插入了一个进度条，我想让它在加载时显示并在不加载时禁用它。所以我使用的是可见的，但它发生了，所以其余的
mysql - CONCAT 与 IF ELSE 一起？
CREATE TABLE `users` ( `id` int(11) AUTO_INCREMENT, `academicdegree` varchar(255),
sql - MySQL - Where IN 与 GROUP_CONCAT 一起
IN() 中使用的查询返回:1, 2。然而，整个查询返回 0 行，这是不可能的，因为它们存在。我在这里做错了什么？ SELECT DISTINCT li.auto_id FROM links
javascript - Jade 和 jQuery 一起
亲们，我如何在使用 Jade 生成的表单上实现 jQuery 样式？我想做的是美化表单并使它们可点击。我在 UI 方面很糟糕。期间。我如何在表单上实现这个可选择的方法？ http://jquer
php - Yii 和 Knockout 一起？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
c++ - auto 关键字和 smartpointers 一起？
我可以: auto o1 = new Content; 但不能: std::shared_ptr o1(new Content); std::unique_ptr o1(new Content); 我
java - Firebase 与 sqlite 一起
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu

首页

博学

6Ren·AI

商城

javascript - html5 音频无法与 Angular 一起正常工作 ionic 型