Question

我的Angular项目中有声音，如下所示：

introInfo() {
   this.audio.src = '../assets/sound1.wav';
   this.audio.load();
   this.audio.play();
 }

 feedbackInfo() {
   this.audio.src = '../assets/sound1.wav';
   this.audio.load();
   // auto-start
   this.audio.play();
 }

我希望能够将所有声音静音。如果我单击模板中的按钮：

<img class="grow" id="mute" [src]='mute' (click)="muteF()"/>

我怎么能写我的函数muteF？如果我点击按钮，我想静音。如果我再次单击，则必须执行取消静音。

Answer 1

这对我有用

  muteF() {
    if (this.audio.volume !== 0) {
      this.audio.volume = 0;
    } else {
      this.audio.volume = 1;
    }
  }

Answer 2

可能是这样的（例如，除非角度具有音频特定功能）。

组件

import { ElementRef, Inject, Injectable, ViewChild } from '@angular/core';

@Injectable()
export class MyService {
  @ViewChild('audio') audio: ElementRef

  constructor(/* DOCUMENT would be an option too, from @angular/platform-browser - `@Inject(DOCUMENT) private document: any` */) {}
  introInfo() {
    this.audio.nativeElement.load()
    this.audio.nativeElement.play()
  }
//...
}

然后在模板中

模板

<audio #audio></audio>

Answer 3

您可以使用静音属性，例如

// gatsby-node.js
const path = require('path');
const _ = require('lodash');
const { paginate } = require('gatsby-awesome-pagination');
const { createFilePath } = require(`gatsby-source-filesystem`);
const { fmImagesToRelative } = require('gatsby-remark-relative-images');


exports.onCreateNode = ({ node, getNode, actions }) => {
  fmImagesToRelative(node);
  const { createNodeField } = actions;
  // create fields slug on every markdown
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `content` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
  // create fields slug on every author yaml
  if (node.internal.type === `TagsYaml`) {
    const slug = createFilePath({ node, getNode, basePath: `content` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
  // create fields slug on every author yaml
  if (node.internal.type === `AuthorsYaml`) {
    const slug = createFilePath({ node, getNode, basePath: `content` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}
// Create pages from markdown files
exports.createPages = ({graphql, actions}) => {
    const {createPage} = actions;
    return new Promise((resolve, reject) => {
        resolve(
            graphql(
                `
                query {
                  pages: allMarkdownRemark(
                    filter: { fileAbsolutePath: { regex: "/pages/" } fields: { draft: { eq: false }} }
                    sort: { fields: [frontmatter___title], order: DESC }
                  ) 
                  { 
                    edges {
                      node {
                        id
                        frontmatter {
                          type
                          template
                          title
                          slug
                        }
                      }
                    }
                  }
                  posts: allMarkdownRemark(
                    filter: { fileAbsolutePath: { regex: "/posts/" } fields: { draft: { eq: false }} }
                    sort: { fields: [frontmatter___title], order: DESC }
                  )
                  { 
                    edges {
                      node {
                        id
                        frontmatter {
                          type
                          template
                          title
                          slug
                          tags
                        }
                      }
                    }
                  } 
                  tagsGroup: allMarkdownRemark(
                    filter: {fileAbsolutePath: {regex: "/posts/"}, 
                    fields: {draft: {eq: false}}}, 
                    sort: {fields: [frontmatter___date], 
                    order: DESC}, limit: 2000)
                  {
                    group(field: frontmatter___tags) {
                      fieldValue
                    }
                    edges {
                      node {
                        id
                        frontmatter {
                          type
                          title
                          slug
                          tags
                        }
                      }
                    }
                  }
                  author: allAuthorsYaml 
                  {
                    edges {
                      node {
                        id
                        twitter
                        bio
                        fields {
                          slug
                        }
                      }
                    }
                  }
                }
                `,
            ).then((result) => {
                // Page
                result.data.pages.edges.forEach(({node}) => {
                    //const component = path.resolve({'src/templates/custom/about.js'});
                    createPage({
                      path: node.frontmatter.slug,
                      component: path.resolve(`./src/templates/pages/${node.frontmatter.template}.js`),
                        context: {
                            id: node.id,
                        },
                    });
                });
                // Blog
                result.data.posts.edges.forEach(({node}) => {
                    const component = path.resolve(`./src/templates/posts/${node.frontmatter.template}.js`);
                    createPage({
                        path: `/blog/${node.frontmatter.slug}`,
                        component,
                        context: {
                            id: node.id,
                        },
                    });
                    // Pagination Bloglist
                    const blogPosts = result.data.posts.edges;
                    const pathPrefix = ({ pageNumber, numberOfPages }) => pageNumber === 0 ? '/blog' : '/blog/page'
                    paginate({
                        createPage,
                        items: blogPosts,
                        component: path.resolve('src/templates/posts/list.js'),
                        itemsPerPage: 4,
                        pathPrefix: pathPrefix
                    });
                    // Blog tags
                    const tags = result.data.tagsGroup.group;
                    tags.forEach(tag => {
                      createPage({
                          path: `/blog/tags/${_.kebabCase(tag.fieldValue)}`,
                          component: path.resolve('src/templates/taxonomies/list.js'),
                          context: {
                              tag: tag.fieldValue,
                          },
                      });
                      // Pagination Taglist
                      const tagPrefix = ({ pageNumber, numberOfPages }) => pageNumber === 0 ? `/blog/tags/${_.kebabCase(tag.fieldValue)}` : `/blog/tags/${_.kebabCase(tag.fieldValue)}/page`
                      paginate({
                          createPage,
                          items: tags,
                          component: path.resolve('src/templates/taxonomies/list.js'),
                          itemsPerPage: 4,
                          pathPrefix: tagPrefix,
                          context: {
                              tag: tag.fieldValue,
                          },
                      });
                    })
                    // Author
                    result.data.author.edges.forEach(({ node }) => {
                        createPage({
                        path: `${node.fields.slug}${_.kebabCase(node.id)}`,
                        component: path.resolve(`./src/templates/authors/author.js`),
                        context: {
                            // Data passed to context is available
                            // in page queries as GraphQL variables.
                            slug: node.fields.slug,
                            id: node.id
                        },
                        })
                    });
                });
                resolve();
            }),
        );
    });
};

同样适用于视频元素。

来源：https://www.w3schools.com/tags/av_prop_muted.asp

如何在Angular2中静音和取消静音？

3 个答案:

组件

模板