Question

我有一个音频标签

document.getElementById("soundContainer").setAttribute('src', _path );
document.getElementById("soundContainer").load();
document.getElementById("soundContainer").play();

我从javascript加载来源，工作正常但来源是歌曲，这意味着它们是5 + mb
并且他们只在满载（下载）后才开始播放

    import { NgFor} from 'angular2/common';
    import { bootstrap } from 'angular2/platform/browser';
    import { Component, View, Directive, OnDestroy, Input, enableProdMode } from 'angular2/core';
    import { CORE_DIRECTIVES} from 'angular2/common';


    @Component({selector: 'itemcontainer',})
    @View({ template: `<ul (click)="$event.preventDefault()">
                       <li *ngFor="#it of items">Any Item</li>
                       </ul>
                       <div><ng-content></ng-content></div>`,

            directives: [NgFor],
    })
    export class ItemContainer {
        public items: Array<Item> = [];

        public addItem(item: Item) {
            this.items.push(item);
        }

        public removeItem(item: Item) {
            var index = this.items.indexOf(item);
            if (index === -1) {
                return;
            }

            console.log(`Index about to remove: ${index} this.items length: ${this.items.length}`);
            this.items.slice(index, 1);
            console.log(`this.items length: ${this.items.length}`);
        }
    }

    @Directive({ selector: 'item' })
    export class Item implements OnDestroy {

        @Input() public heading: string;

        constructor(public itemcontainer: ItemContainer) {
            this.itemcontainer.addItem(this);
        }

        ngOnDestroy() {
            this.itemcontainer.removeItem(this);
        }
    }

    @Component({
        selector: 'my-app'
    })
    @View({
        template: `<div (click)="$event.preventDefault()">
            <button type="button" (click)="addItem()">Add item</button>
            <button type="button" (click)="removeItem()">Remove item</button>

        <itemcontainer>
            <item *ngFor="#containerItem of containerItems" [heading]="containerItem.title">Content </item>
        </itemcontainer>
    </div>`,

        directives: [CORE_DIRECTIVES, Item, ItemContainer],

    })

    class Tester {

        private counter: number = 2;

        public containerItems: Array<any> = [
            { title: 'Item1' },
            { title: 'Item2' },
        ];

        addItem() {
            this.containerItems.push({ title: `Item ${this.counter}` });
        }

        removeItem() {

            if (this.containerItems.length > 0) {
                this.containerItems.splice(this.containerItems.length - 1, 1);
            }
        }
    }

    enableProdMode();
    bootstrap(Tester);

这里我需要帮助有没有办法在加载/播放时播放音频希望我公平地解释并提前感谢。

Answer 1

您实际上已经在加载时播放音频。一旦获得足够的数据，音频就开始播放。尝试限制Chrome中的网络带宽并检查网络活动。

如果你想要否定这个微小的延迟，你可以使用两个声音容器。一个用于播放，另一个用于预加载内容。请记住，当前播放的音频容器在播放时仍会下载音频数据并消耗网络带宽。

<html>
<script>
var currentSound = 0;
var sounds = [
 "one.mp3",
 "two.mp3",
 "three.mp3"
]

function switchAudio() {
  var notPlaying = document.querySelector("audio:not(.playing)");
  var nowPlaying = document.querySelector("audio.playing");
  if(nowPlaying!==null) {
    nowPlaying.pause();
    nowPlaying.className="";
  }
  notPlaying.className="playing";
  notPlaying.play();
}

function nextTrack() {
  var notPlaying = document.querySelector("audio:not(.playing)");
  notPlaying.setAttribute('src', sounds[currentSound]);
  currentSound=(currentSound + 1) % sounds.length;
  notPlaying.load();
  notPlaying.oncanplay = switchAudio;
}

</script>
<body>
  <audio preload="metadata" loop></audio>
  <audio preload="metadata" loop></audio>
  <button type="button" onclick="nextTrack()">next track</button>

</body>
</html>

html音频标签，加载时播放

1 个答案: