Recently I was working on a little page for a birthday card (you can give it as a special birthday gift to someone you want to give it to), which can show her pictures and what you want to say to her. Play music that fits the scene. Finally, there is a gift-drawing session similar to wechat hongbao, where you can put gifts or special wishes. Then make the qr code of the webpage and send it out,

Then do everything in the inside, found because the playback is problematic. There are three main interesting questions.

1 Static audio resources cannot be loaded

2 Audio cannot be played

3 Audio can no longer play automatically when entering a web page

Let’s tackle each of these questions. There is no online system to talk about this problem, I was afraid of a lot of pits to complete. Just write it down in the hope that it will help others.

Static resources cannot load

Before vue loaded static resources, images were placed in assets folder. But you can’t put audio directly into assets. Since Vue has written its own format parser, images can be easily identified and audio cannot be loaded in assets. If you must play this way, configure an MP3 parser.

1 Add the loader to webpack.base.conf.js as follows

{
     test: /\.(mp3)(\? . *)? $/, loader:'url-loader',
     options: {
       name: utils.assetsPath('assets/[name].[hash:7].[ext]')}}Copy the code

2 Add the convert attribute option to the SRC attribute of audio in vue-loader.conf.js file to let vue-loader know that the content of the SRC attribute of audio needs to be converted to a module.

  var utils = require('./utils')
var config = require('.. /config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  transformToRequire: {
    "audio": "src"}}Copy the code

3 Add the Audio label to import resource files

<audio autoplay="autoplay" 
       controls="controls"
       preload="auto"
       src=".. /assets/allright.mp3">
</audio>
Copy the code

In this case, the resource file can be stored in the assets directory.

More details refer to: www.jianshu.com/p/ff6698eed…

I didn’t do it that way, but it seems a little bit troublesome

Previously, if it was an audio file, it could be placed in the static directory, but you will find that after Vue3.0 there is no static folder at all. This is you would say to create their own not good, indifferent can, but to vue. Config. js configuration, let vue know.

// Place static resources (js/ CSS /img/font/...) assetsDir:"static".Copy the code

This allows you to introduce audio resources directly into your code.

2 Audio cannot be played

I’m using audio instead of any other plugin

<audio ref="audio" id="audio">&nbsp; </audio>Copy the code
Play() {let audioPlay = this.$refs.audio; Audioplay.src = this.playpath // Local audio path audioplay.play () Audioplay.onended =function() { audioPlay.play(); }}Copy the code

The one above is modified, and I couldn’t play it before because I was using audiodocument.getElementById('audio')This one is also available to get elements and this one comes with HTML,Refs fetching has the advantage of fetching post-rendered, whereas the former does not necessarily. Enter the interface may not be finished rendering, resulting in the acquisition. And if you use document.getelementById (‘audio’) more than once, you can generate multiple objects, creating internal friction. $refs just gets the last change and can play

3 Audio can no longer play automatically when entering a web page

Can it just be over? But it doesn’t, and you’ll notice that even though you called play when entering the page, it doesn’t play actively. Why is that? Because Google Browser to save user traffic and strong placement of advertising or what is prohibited audio and video auto-play. It can only play if the user actively triggers the click event. But you’ll find a lot of pages that go into autoplay. I’m sure it can be done. I think I can do it. Then I went online and climbed into a pit. Some people say that since it can be triggered by an active click, I just need the code to trigger the click event when I enter the interface. But I tried it and it didn’t seem to work. Finally, a perfect solution was found

 Play() {let audioPlay = this.$refs.audio;
audioPlay.src = this.playPath
if (window.WeixinJSBridge) {
                   window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
// this.$refs.audio.load()
setTimeout(() => {
  audioPlay.play()
  audioPlay.onended = function() { audioPlay.play(); }}, 300)})}else {
             document.addEventListener('WeixinJSBridgeReady', () => {
          window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
// this.$refs.audio.load()
setTimeout(() => {
audioPlay.play()

 }, 300)
 })
 }, false)}Copy the code

The reason for the 300ms delay is that some phones will have JS errors, which are added and then gone. // this.$refs.audio. Load () feels like local audio is unnecessary.

Then my little birthday card is finished, front and back or encountered a lot of pits. But thanks to the solution, I hope you can see the same problem, save a little time. I am also the previous mobile terminal development turned over, if there is not good, welcome to correct.